// 使用npm下载
npm install vue-amap --save
// 新建amap.js 且输入下面代码
import Vue from 'vue';
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
if (!Vue.prototype.$isServer) {
VueAMap.initAMapApiLoader({
// 高德的key
key: '',
// 插件集合
plugin: ['AMap.Geolocation', 'AMap.Marker', 'AMap.ToolBar', 'AMap.Circle', 'AMap.PolyLine'],
uiVersion: '1.0',
// 高德 sdk 版本,默认为 1.4.4
v: '1.4.8'
});
}
// 需要使用的地方
<section style="width: 100%; height: 100%">
<no-ssr>
<el-amap
vid="amap"
:zoom="zoom"
class="amap-demo"
:center="center"
:events="events"
>
<el-amap-marker :position="centericon" />
</el-amap>
</no-ssr>
</section>
export default {
data() {
let self = this
return {
zoom: 18,
center: [121.435821, 29.313501],// 显示在地图中心点位置
centericon: [121.432821, 29.313501],// 标注位置经纬度
events: {
init(map) {
let markers = _.cloneDeep(self.markers)
markers.forEach((item, index) => {
AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
item = new SimpleMarker({
iconLabel: {
innerHTML: index,
style: {
color: '#fff',
},
},
iconStyle: '#1995f5',
map: map,
position: item.position,
})
})
})
self.center = self.lnglat2container(self.centericon, map)// 获取标注位置进而调用方法换算出屏幕位置
self.Map = map// 由于业务逻辑 需要切换位置 所以把map赋值
// self.center = self.lnglat2container(self.center, map)
},
},
Map: null,
markers: [],
}
},
methods: {
// 换算位置 转化中心点坐标
lnglat2container(conter, map) {
console.log(map)
var lnglat = new AMap.LngLat(conter[0], conter[1])
var pixel = map.lngLatToContainer(lnglat)
pixel.x += window.innerWidth / 4
var lng = map.containerToLngLat(pixel)
return [lng.lng, lng.lat]
},
// 定位到具体位置
location(lag, lat) {
this.centericon = [lag, lat]
this.center = this.lnglat2container(this.centericon, this.Map)
// this.center = this.centericon// 修改center显示区域位置
},
}
</script>
版权声明:本文为weixin_48280939原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。