【VUE】vue-amap高德地图定位以及文本标注

vue-amap高德地图定位以及文本标注

因要求需实现在地图的定位以及该定位的文本标注，所有我看了一下实现的方式有哪些。最后选择了用现成的 vue-amap高德组件 去实现。

实现效果如图：

实现过程很简单：

1.到 高德开发者平台 申请key

2.安装vue-amap（官方推荐 npm 安装）

npm install vue-amap --save

3.使用组件调用地图
在main.js引入vue-amap地图组件：

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 初始化vue-amap
VueAMap.initAMapApiLoader({
    
    
  key: '此处放高德申请的key',
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.4'
})

在vue页面中使用：

<el-amap ref="aMap" class="map-dialog" vid="aMap" :zoom="12">
  <el-amap-marker
    v-for="(item,index) in mapMarker"
    :key="index"
    :position="item.position"
    :label="item.label"
  />
</el-amap>

// 数据格式：
this.mapMarker = [{
    
    
  position: [122.59996, 36.177646],
  label: {
    
     content: '办公地点', offset: [-20, -30] }
}, {
    
    
  position: [61.59996, 90.177646],
  label: {
    
     content: '学校地点', offset: [-20, -30] }
}]    

vue-amap高德地图组件：
1、官方文档参数说明 - 当前实现用的点坐标
2、github地址

github地址上有很多种使用方式，如部分截图：