vue 对接高德地图

1、安装

npm i vue-amap --save

2、引用

import VueAMap from 'vue-amap'

Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
  key: '申请的key',
  // 使用插件
  plugin: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geocoder', 'AMap.Autocomplete'],
  // 默认高德SDK版本为:1.4.15 
  v: '2.0',
  uiVersion: '1.0.11'
});

index.html 引入
<script src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: '申请key对应的密钥'
  }
</script>

3、初始化地图、逆向编码、添加标记、提示框及批量标记

this.map = new AMap.Map("mytest1Map"，
 {resizeEnable: true，// 是否控制地图尺寸大小
  viewMode:"3D"，// 使用3D视图
  zoomEnable:true，//地图是否可缩放，默认值为true
  zoom: 10，// 缩放比例
  dragEnable: true，// 禁上拖动
  cursor:"hand"，//鼠标在地图上展示手型
  center: [116.397428， 39.90923], // 设置中心坐标
});

// 创建地理编码[逆向地理编码:坐标>地址 正向地理编码:地址->坐标]
this.geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
  city: '全国'
  radius: 1000
})//范围，默认: 500

//地图双击事件
this.map.on("dblclick"， (res) => {
  let p = []
  p.push(res.lnglat.lng)
  p.push(res.lnglat.lat)

  // 逆向编码
  this.geocoder.getAddress(p, function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
       if (result.regeocode) {
          Let address = result.regeocode.formattedAddress
          let keyid = result.regeocode.addressComponent.towncode
          let pItem = (name:address, lnglat:p, id:keyid}
          that.markersData.push(pItem)
          that.addMarker(pItem) // 添加标记
       }
    } else { 
       console.error('根据经纬度查询地址失败')
    }
});

// 添加标记
addMarker(pItem) {
  let marker = new AMap .Marker({
  //经度- Longitude 维Latitude
  position: pItem.lnglat, //要展示marker的经度、结度。数据格式就是数组里放入经结度数据
  //icon: require("../../../assets/imgs/site-16-32.png")， //显示的图标
  icon: this.icon,
  offset: new AMap.Pixe1(-16，-32),//图标偏移量，展示时会默认以图标的左上角为原点，不没置偏移量会导致地图放大缩小时造成图标偏移的情况,偏移量设置为:图片宽度的一半，负整个高度 
  marker.setLabel({
    direction: "center",  // 设置文本居中
    // offset: new AMap.PixeL(0，30)，//没置文本标注偏移量 写法2: offset: {x: 0, y: 30} 
    // offset: new AMap.Pixel(0，32)，//设置文本标注偏移量 写法2: offset: {x: 0, y: 32} 
    // content: "div style='background: #12469C; color: white;'>"+pItem.name+"</div>"，//设置文本标注内容
    content:"<div class='notInfo'>"+pItem,name+"</div>"，//设置文本标注内容
  });
  this .map.add(marker)
}

// 创建图标
this.icon = new AMap.Icon({ // 创建 AMap.Icon 实例
  size: new AMap.Size(32，32), //图标尺寸
  image: require("../../../assets/imgs/site-16-32.png"), // Icon的图像
  imageOffset: new AMap.Pixel(0，-69),// 图像相对展示区域的偏移量，适于雪碧图等
  imageSize: new AMap.size(32，32), // 根据所设置的大小拉伸或压缩图片
})

this.icon2 = new AMap.Icon({ // 创建 AMap.Icon 实例
  size: new AMap.size(32， 42), //图标尺寸
  image: require("../../../assets/imgs/poi-marker-default.png"), // Icon的图像
  imageOffset: new AMap.Pixel(0，-60), // 图像相对展示区域的偏移量，适于雪碧图等
  imageSize: new AMap.size(32，42), // 根据所设置的大小拉伸或压缩图片
})

// 批量添加标记
addMassMarkers() {
  // 信息提示框
  this.infowindow = new AMap.InfoWindow({
    autoMove: true,
    //anchor: "top-Left",
    offset: {x:6， y:-32},
  })

  this.markersData.forEach((item, i) => {
    let marker = new AMap .Marker({map: this.map,
      position: item.lnglat,
      icon: this.icon,
      //offset: new AMap.Pixel(0，0),
    })
    // 提示信意
    let s = []
    s.push("<b>名称:" + item.name+"</b>")
    s.push("<hr>")
    s.push("地址: " + item.name)
    this.infowindow.setContent(s.join("<br>"))
    marker.content = {infowin: this.infowindow, title: item.name}
    marker.on('click', this.markerClick)
    this.markers.push(marker)
  })
  this .map.add(this.markers )
  // this.map.setFitView(); // 自动适应显示想显示的范围区域
}

4、显示定点标记、点击标记事件

// 定位标记
setLocation(poi, index) {
  this.currMarker = index 
  for (let i = ; i < this.markers.length; i++) {
    this.markers[il.setIcon(this.icon)
  }
  this.markers[index].setIcon(this.icon2) // 更换图标
  this.markers[index].content.infowin.open(this.map, poi.lnglat)
  this.map.setCenter(poi.Inglat) // 设置中心坐标
}

markerClick(e) {
  // 标注点击事件 显示提示信息
  e.target.content.infowin.open(this.map, e.target.getPosition())
}