安装高德地图

npm i @amap/amap-jsapi-loader --save

引入

import AMapLoader from '@amap/amap-jsapi-loader';

*在组件中引入设置安全密匙

  beforeMount() {
    window._AMapSecurityCosnfig = {
      securityJsCode: "XXXXXXXXXXX"
    }
  },

初始化

initMap(){
      AMapLoader.load({
        key:"XXXXXXXXXX",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:[
          'AMap.Scale',
          'AMap.ToolBar',
          'AMap.ControlBar',
          'AMap.Geocoder',
          'HawkEye'
        ],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {             // 是否加载 AMapUI，缺省不加载
          version: '1.1',   // AMapUI 版本
          plugins:[
            'overlay/SimpleMarker',
          ],       // 需要加载的 AMapUI ui插件
        },
        Loca:{                // 是否加载 Loca， 缺省不加载
          version: '2.0'  // Loca 版本
        },
      }).then((AMap)=>{

        // vue2 中采用非响应式储存
        this.map = new AMap.Map("MapSetCom",{  //设置地图容器id
          viewMode:"3D",    //是否为3D地图模式
          zoom:5,
          resizeEnable: true,//初始化地图级别
          center:[105.602725,37.076636], //初始化地图中心点位置
        });
        // 设置鼠标的样式
        this.map.setDefaultCursor("pointer");
        // !!!添加插件控件 (不添加没有jscode)
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.ControlBar());
      }).catch(e=>{
        console.log(e);
      })
    },

mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
  },

逆编码的使用

// 获取逆编码
const geocoder= new AMap.Geocoder({})
// !!!坑要塞入安全密匙否则调用报错
geocoder.config.jscode=this.jsCode  
const lnglat=[this.getLng,this.getLat]
geocoder.getAddress(lnglat, (status, result)=> {
  if (status === 'complete'&&result.regeocode) {
    // 获取编码地址
    const address = result.regeocode.formattedAddress
    // 获取逆编码后传值
    this.$emit('getLonglat',this.getLng,this.getLat,address)
  }else{
    this.$emit('getLonglat',this.getLng,this.getLat,'根据经纬度查询地址失败')
    console.error('根据经纬度查询地址失败')
  }
})

使用POI搜索功能

// 搜索
new AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker)=> {
  const poiPicker = new PoiPicker({
    city:'全国',//可以选择城市
    input: 'searchInput',//这是input的id
    placeSearchOptions: {
      map: this.map,
      pageSize: 4
    },
    searchResultsContainer: 'searchResults'// 装搜索结果的盒子id
  })
  // !!!重要塞入安全密匙否则调用失败
  poiPicker.citysearch.config.jscode=this.jsCode
  poiPicker.on('poiPicked', (poiResult)=> {
    poiPicker.hideSearchResults();
    const source = poiResult.source,
          poi = poiResult.item
    poiPicker.searchByKeyword(poi.name);
    this.map.setZoomAndCenter(18, poiResult.item.location)
    if (source === 'search') {
      //search来源的
      const addressName=poi.pname+poi.cityname+poi.adname+poi.address
      const lng=poi.location.lng
      const lat=poi.location.lat
      this.$emit('getLonglat',lng,lat,addressName)
    }else if(source === 'suggest'){
      // suggest的来源
      const addressName=poi.district+poi.address
      const lng=poi.location.lng
      const lat=poi.location.lat
      this.$emit('getLonglat',lng,lat,addressName)
    }
  })
})

点击地图创建marker点获取经纬度

this.map.on('click', (e)=> {
    if(this.marker){
      // 移除marker点
      this.map.remove(this.marker)
    }
    this.getLng=e.lnglat.getLng()
    this.getLat=e.lnglat.getLat()
    console.log(e.lnglat.getLng(),e.lnglat.getLat())
    this.marker = new AMap.Marker({
      // 设置是否可以拖拽
      draggable: false,
      cursor: 'pointer',
      // 设置拖拽效果
      raiseOnDrag: true,
    })
    // 设置点位置
    this.marker.setPosition([e.lnglat.getLng(),e.lnglat.getLat()]);
    // 添加点
    this.map.add(this.marker);
  })
})