VUE集成高德地图很简单,但是首先你的有个高德地图
开发者的key,怎么申请key见 https://blog.csdn.net/qq_38211852/article/details/80289412
VUE的高德地图组件在:https://github.com/ElemeFE/vue-amap
老规矩:
1,安装 npm install vue-amap -S
2, main.jsp引用
// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: 'YOUR_KEY',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 高德 sdk 版本,默认为 1.4.4
v: '1.4.4'
});
3,页面使用
<el-dialog title="地图" :visible.sync="mapVisible">
<div class="amap-page-container">
<el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin">
<el-amap-info-window :position="mywindow.position" :content="mywindow.content" :visible="mywindow.visible" :events="mywindow.events"></el-amap-info-window>
<el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
<el-amap-circle :center="circle.center" :radius="circle.radius" :fillOpacity="circle.fillOpacity" :events="circle.events" :strokeColor="circle.strokeColor" :strokeStyle="circle.strokeStyle" :fillColor="circle.fillColor"></el-amap-circle>
</el-amap>
</div>
</el-dialog>
data属性加:center就是你高德地图的坐标
zoom: 15,
center: [],
circle: {
clickable: true,
center: [],
radius: 200,
fillOpacity: 0.3,
strokeStyle: 'dashed',
fillColor: '#FFFF00',
strokeColor: '#00BFFF'
},
marker: {
position: [],
events: {
click: () => {
if (this.mywindow.visible === true) {
this.mywindow.visible = false
} else {
this.mywindow.visible = true
}
},
dragend: (e) => {
this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
}
},
visible: true,
draggable: false
},
mywindow: {
position: this.cententValue,
content: '',
visible: true,
events: {
close () {
this.mywindow.visible = false
}
}
},
plugin: {
pName: 'Scale',
events: {
init (instance) {
console.log(instance)
}
}
}
在点击显示地图按钮的时候,把地图的坐标和显示内容赋值
showMap($index) {
//显示地图
this.dialogStatus = "showMap"
//this.list[$index].position格式位12.3423,34,4343
if(this.list[$index].position){
let pos = this.list[$index].position.split(',');
this.center=pos
this.circle.center = pos
this.marker.position = pos
this.mywindow.position=pos
this.mywindow.content=this.list[$index].positionRemark
this.mapVisible = true
}
}
出来的大致效果如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2cs0TRU1kcW12Yv50MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL1cjMxQzN0UTMwMDMxgTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)