yiliangyiyun-pc/src/components/mapdrag/indexMap.vue

<style lang='scss' scoped>
  .mapContent {
    position: relative;
    margin-top: 10px;

    .center-add {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 999;
      width: 30px;
      height: 30px;
    }
  }

  #mapContainer {
    width: 100%;
    height: 506px;
  }

  #tip {
    position: absolute;
    top: -45px;
    display: flex;
  }

  #tip .el-input {
    // width: 179px;
    margin-right: 0px;
  }

  #tip .el-select {
    margin-right: 10px;
  }

  #tip .el-select {
    width: 179px;
  }

  #tip .el-textarea {
    width: 179px;

    /deep/ .el-textarea__inner {
      height: 40px;
      resize: none;
    }
  }

  .el-button--primary {
    background-color: #5878e8;
    border-color: #5878e8;
  }

  .el-button--default {
    color: #5878e8;
    border-color: #5473e8;
  }

  .address {
    display: flex;
    align-items: center;
    margin-right: 20px;

    // position:absolute;
    // top: -35px;
    .address-input {
      display: inline-block;
      width: 480px;
    }
  }
</style>

<template>
  <div class="mapContent">
    <div id="mapContainer"></div>
  </div>
</template>

<script>
  import {
    regionData,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  import image from '../../../public/img/ic_locationmarker.jpg'
  import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    data() {
      return {
        map: null,
        provinces: [],
        province: '',
        districts: [],
        district: '',
        citys: [],
        city: '',
        polygons: [],
        selectedOptions1: [],
        areacode: '',
        address: '',
        objPoint: [],
        markers: [],
        zoomEnable: true,
        dragEnable: true,
        status: true,
        center: '',
      }
    },
    props: ['flagVisible', 'position', 'selectedOptions', 'isShowaddress', 'type'],
    computed: {
      showFlag() {
        return this.flagVisible
      },
    },
    watch: {},
    async created() {
      AMapLoader.reset();
      // debugger
      // 已载入高德地图API，则直接初始化地图
      if ( window.Loca) {
        this.loadmap()
        // 未载入高德地图API，则先载入API再初始化
      } else {
    //  await remoteLoad(`https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar`)
    //     await remoteLoad('https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47')
        this.remoteLoad()
      }
    },
    mounted() {
      this.loadmap()
    },
    methods: {
remoteLoad(){
  // debugger
  // delete window.AMap;
  // let scriptElement1 = document.createElement('script')
  // scriptElement1.src =
  //   "https://webapi.amap.com/maps?v=2.0&key=211dd6f989e719022aaf47ddb0659c47&plugin=AMap.Scale,AMap.ToolBar"
  // document.body.appendChild(scriptElement1)
  // let scriptElement2 = document.createElement('script')
  // scriptElement2.src = "https://webapi.amap.com/loca?v=2.0.0&key=211dd6f989e719022aaf47ddb0659c47"
  // document.body.appendChild(scriptElement2)
  // this.loadmap()
   // window.Loca = Loca
  //  console.log(Loca)
  
},
      loadmap(val) {
       AMapLoader.load({ //首次调用 load
        key:'211dd6f989e719022aaf47ddb0659c47',//首次load key为必填
        version:'2.0',
      	Loca:{
            version: '2.0.0',
        }
    }).then((AMap)=>{
        map = new AMap.Map('mapContainer',{
            zoom: 5,
        });

        var layer = new Loca.PointLayer({
            map: map,
            
        });

        layer.setData(districts, {
            // 指定经纬度所在字段
            lnglat: 'center'
        });

        layer.setOptions({
            style: {
                // 圆形半径，单位像素
                radius: 15,
                // 填充颜色
                color: '#07E8E4',
                // 描边颜色
                borderColor: '#5DFBF9',
                // 描边宽度，单位像素
                borderWidth: 1,
                // 透明度 [0-1]
                opacity: 0.9,
            }
        });

        layer.render();
    }).catch((e)=>{
        console.log(e);
    });
      //  setTimeout(() => {
      //   //  debugger
      //    var map = new AMap.Map('mapContainer', {
      //      zoom: 5.29,
      //      // showLabel: false,
      //      // viewMode: '3D',
      //      pitch: 48,
      //      center: [104.780269, 34.955403],
      //      mapStyle: 'amap://styles/dark',
      //    });

      //    var loca = new Loca.Container({
      //      map,
      //    });

      //    // 颜色配置
      //    var headColors = ['#ECFFB1', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968'];
      //    var trailColors = [
      //      'rgba(255,178,6, 0.2)',
      //      'rgba(255,178,6, 0.2)',
      //      'rgba(20,105,104, 0.2)',
      //      'rgba(20,105,104, 0.2)',
      //      'rgba(20,105,104, 0.2)',
      //      'rgba(20,105,104, 0.2)',
      //      'rgba(20,105,104, 0.2)',
      //      'rgba(20,105,104, 0.2)',
      //    ];

      //    // 进入北京方向的线
      //    var inLineSource = new Loca.GeoJSONSource({
      //      url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-in.json',
      //    });

      //    var inLinelayer = new Loca.PulseLineLayer({
      //      // loca,
      //      zIndex: 11,
      //      opacity: 1,
      //      visible: true,
      //      zooms: [2, 22],
      //    });

      //    inLinelayer.setStyle({
      //      altitude: 0,
      //      lineWidth: (_, feature) => feature.properties.lineWidthRatio * 4 + 1,
      //      headColor: (_, feature) => headColors[feature.properties.type],
      //      trailColor: (_, feature) => trailColors[feature.properties.type],
      //      interval: 0.5,
      //      duration: 2000,
      //    });
      //    inLinelayer.setSource(inLineSource);
      //    loca.add(inLinelayer);

      //    // 出北京方向的线
      //    var outLineSource = new Loca.GeoJSONSource({
      //      url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
      //    });

      //    var outLinelayer = new Loca.PulseLineLayer({
      //      // loca,
      //      zIndex: 11,
      //      opacity: 1,
      //      visible: true,
      //      zooms: [2, 22],
      //    });

      //    outLinelayer.setStyle({
      //      altitude: 0,
      //      lineWidth: (_, feature) => feature.properties.lineWidthRatio * 1 + 3,
      //      headColor: (_, feature) => headColors[feature.properties.type],
      //      trailColor: (_, feature) => trailColors[feature.properties.type],
      //      interval: 0.25,
      //      duration: 5000,
      //    });
      //    outLinelayer.setSource(outLineSource);
      //    loca.add(outLinelayer);

      //    // 下方呼吸点层
      //    var scatter = new Loca.ScatterLayer({
      //      loca,
      //      zIndex: 10,
      //      opacity: 1,
      //      visible: true,
      //      zooms: [2, 22],
      //    });

      //    var scatterGeo = new Loca.GeoJSONSource({
      //      url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-scatter.json',
      //    });
      //    scatter.setSource(scatterGeo);
      //    scatter.setStyle({
      //      unit: 'px',
      //      size: (_, feature) => {
      //        var size = feature.properties.lineWidthRatio * 2 + 30;
      //        return [size, size];
      //      },
      //      borderWidth: 0,
      //      texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_yellow.png',
      //      duration: 2000,
      //      animate: true,
      //    });
      //    loca.add(scatter);

      //    loca.animate.start();
      //  }, 500)
      }
    },
  }
</script>