首先是安装插件
npm i vue-amap
在main.js中全局注册
// 高德地图
import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({
// 高德的key
key: 'xxxx',
// 插件集合 （插件按需引入）
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType',
'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.DistrictSearch','AMap.CircleMarker','AMap.Polyline'
// 'AMap.Object3DLayer', 'AMap.Object3D'
]
});
//高德的安全密钥
window._AMapSecurityConfig = {
securityJsCode: 'xxxxxxxxx',
}
页面使用，因为用的地方是2处，每次的逻辑不同，所有没有封装地图，
<div :style="{width:'100%',height:'300px'}">
<el-amap vid="Amap" class="amap-demo" :amap-manager="amapManager" :plugin="plugin" :center="center" :zoom="zoom"
:events="mapEvents"></el-amap>
</div>
import remoteLoad from '@/utils/remoteLoad'
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
let map = null;
const amapManager = new AMapManager() // 新建生成地图画布
data中写这个
mapEvents: {
init(o) {
// 地图设置自定义样式
o.setMapStyle('amap://styles/f921c59a4dcc6e1c70cc20cfdf0d57a8');
lazyAMapApiLoaderInstance.load().then(() => {
self.initMap()
})
},
},
这个是针对页面刷新地图空白或是没有了，我实际没遇到，看到一个博主写的，所以记录一下把，如果博主看到需删除或是啥的联系把，文字忘记收藏了
created() {
// 已载入高德地图API，则直接初始化地图
if (window.AMap && window.AMapUI) {
this.initMap()
// 未载入高德地图API，则先载入API再初始化
}
// else {
// 载入高德地图和UI组件
// Promise.all([remoteLoad(`http://webapi.amap.com/maps?v=1.4.17&key=[be3ca2f981dae81f81e338f615606c64]`), remoteLoad('http://webapi.amap.com/ui/1.0/main.js')]).then(() => {
// this.initMap()
// })
// }
},
// 加载地图
initMap() {
// 获取地图实例
map = amapManager.getMap()
// 获取单位信息
if (this.isLeaf) {
getCompany(this.companyid).then((res) => {
var point = new AMap.LngLat(
Number(res.data.lng),
Number(res.data.lat)
);
let icon = new AMap.Icon({
size: new AMap.Size(50, 50), // 图标
image: poinsImg, // Icon的图像，这个图标必须放在public
imageSize: new AMap.Size(40, 45) // 根据所设置的大小拉伸或
})
let marker = new AMap.Marker({
map: map,
position: [point.lng, point.lat],
icon: icon,
// offset: new AMap.Pixel(0, -55),
});
marker.setMap(map)//将坐标点应用于地图实例
// 将标注添加到地图中
map.add(marker);
// 将地图中心移动到可视区中点
map.panTo(point);
var content = res.data.address;
marker.setLabel({
offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
content: "<div>" + content + "</div>", //设置文本标注内容
direction: 'bottom' //设置文本标注方位
})
});
}
},
这个是首页用到的。按道理用上面的方法直接获取实例，不用在创建的，
之前是会造成加载两次地图，第一次是默认的样式地图然后再次自定义样式地图，后面有不见了，
所以代码就没有改，两种看自己使用把
lazyAMapApiLoaderInstance.load().then(() => {
map = new AMap.Map("home-map")
map.setMapStyle("amap://styles/f921c59a4dcc6e1c70cc20cfdf0d57a8");
var lng = this.points[0].lng;
var lat = this.points[0].lat;
if (this.hasTree && this.isLeaf) {
if (this.points.length > 0) {
map.setZoomAndCenter(
14,
[lng, lat]
); // 初始化地图,设置中心点坐标和地图级别
} else {
map.setZoomAndCenter(16, [116.397428, 39.90923]);
map.setCity('南京')
}
}
// 多个单位并且没有选中 设置地图的级别
else {
if (this.points.length > 0) {
map.setZoomAndCenter(
14,
[lng, lat]
);
} else {
map.setZoomAndCenter(16, [116.397428, 39.90923]);
map.setCity('南京')
}
}
// // 添加maker
this.addMaker(this.points);
map.on('complete', function () {
// console.log("地图加载完成！");
})
}).catch(err => {
console.log(err)
});
// 添加标注
addMaker(points) {
let pictureData = {
0: abnormImg,
2: falutImg,
3: errImg,
};
points.forEach((item) => {
if (item.type === 3) {
this.imgeList = fireroomImg;
} else if (item.type === 2) {
if (item.onlineStatus == 1) {
this.imgeList = pictureData[item.status];
} else {
this.imgeList = onlineImg;
}
} else if (item.type === 4) {
if (item.onlineStatus == 1) {
this.imgeList = pictureData[item.status];
} else {
this.imgeList = onlineImg;
}
} else {
this.imgeList = companyImg;
}
let icon = new AMap.Icon({
size: new AMap.Size(70, 70), // 图标尺寸
image: this.imgeList, // Icon的图像，这个图标必
imageSize: new AMap.Size(40, 45) // 根据所设置
})
let marker = new AMap.Marker({
map: map,
position: [item.lng, item.lat],
icon: icon,
extData: item,
});
marker.setTitle(item.name);
marker.type = item.type;
marker.companyId = item.companyId;
marker.dangerLevel = item.dangerLevel;
// 建筑物Id
marker.accId = item.accId
// 添加点击事件
marker.on("click", (e) => {
this.markerClick(e);
});
});
// map.setViewport(point);
},
// 添加点击事件
markerClick(e) {
console.log(e.target, "e添加点击事件");
啥业务逻辑写就好了
}
// remoteLoad.js
export default function remoteLoad(url, hasCallback) {
return createScript(url)
/**
* 创建script
* @param url
* @returns {Promise}
*/
function createScript(url) {
var scriptElement = document.createElement('script')
document.body.appendChild(scriptElement)
var promise = new Promise((resolve, reject) => {
scriptElement.addEventListener('load', e => {
removeScript(scriptElement)
if (!hasCallback) {
resolve(e)
}
}, false)
scriptElement.addEventListener('error', e => {
removeScript(scriptElement)
reject(e)
}, false)
if (hasCallback) {
window.____callback____ = function () {
resolve()
window.____callback____ = null
}
}
})
if (hasCallback) {
url += '&callback=____callback____'
}
scriptElement.src = url
return promise
}
/**
* 移除script标签
* @param scriptElement script dom
*/
function removeScript(scriptElement) {
document.body.removeChild(scriptElement)
}
}
