vue3使用高德地图API(踩坑日记)
注意点:
1、marker的显示上:
要么直接在marker的配置项中使用map,要么使用map.add(marker)直接在地图上加,尽量不要两则都用,推荐在配置项指定显示的map
2、各个控件在map中的显示,要么统一用配置项,要么都用map.add(控件实例),否则会出现错误
代码如下:
/* ************* 地图展示 ************** start ******* */
let AMap = (window as any).AMap;
// 地图实例
let map:any = null;
// 城市
let city: any = ref("成都市");
// 地点搜索
var placeSearch:any = null;
// 地图标点
let markers:any = reactive<any[]>([]);
// 选中的地图标点
let markersActive:any = reactive<any[]>([]);
// 地图上的窗体(详情信息窗体)
var infoWindow:any = null;
/* 高德地图 */
let uploadGDMap = () => {
map = new AMap.Map('container-map', {
resizeEnable: true,
viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D'
zoom: 12, // 初始化地图层级
// center: [104.06, 30.67] // 初始化地图中心点
});
// map.on('complete',()=>{
// ElMessage.info("加载完成!");
// })
// map.setCity(city.value);
// searchPosition('');
}
/* marker图标点击 */
let markerClick = (e:any)=>{
console.log("marker信息:",e.target.w.extData);
let poi = e.target.w.extData.poi;
orgInfo.name = poi.name;
orgInfo.adress = poi.adress;
orgInfo.phone = poi.tel;
loadPoint(e);
}
/* 清空所有的marker
all:清除所有的marker
marker: 清除搜索出来的marker
markerActive: 清除选中的marker
*/
let clearMarker = (type:'all'|'marker'|'markerActive' = 'all') => {
if(type === 'marker'){
if(markers.length > 0){
markers.forEach((marker:any) => {
marker.setMap(null);
});
markers.length = 0;
}
return
}else if(type === 'markerActive'){
if(markersActive.length > 0){
markersActive.forEach((marker:any) => {
marker.setMap(null);
});
markersActive.length = 0;
}
return
}
markers.forEach((marker:any) => {
marker.setMap(null);
});
markersActive.forEach((marker:any) => {
marker.setMap(null);
});
markers.length = 0;
markersActive.length = 0;
}
/* 清除窗体 */
let clearInfoWindow = () => {
if(infoWindow){
infoWindow.close();
}
}
/* 加载点位 */
let loadPoint = (e:any) => {
// 清空之前选中的marker
clearMarker('markerActive');
let poi = e.target.w.extData.poi;
infoWindow = new AMap.InfoWindow({
autoMove: true,
offset: {x: 6, y: -32}
});
placeSearch_CallBack(poi);
//回调函数
function placeSearch_CallBack(poi:any) {
//添加marker
var marker = new AMap.Marker({
map: map,
position: poi.location,
icon: new AMap.Icon({
// 图标尺寸
size: new AMap.Size(32, 32),
// 图标的取图地址
// image: '../../assets/imgs/map-landmark.png',
image: '../../../src/assets/imgs/map-landmark-active.png',
// 图标所用图片大小
imageSize: new AMap.Size(32, 32),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
extData: {
poi: poi
}
});
marker.on('click', markerClick); // 这里同样需要设置点击事件,不然当选中后,原来的marker会被遮盖住,再次点击,不会触发原来marker的事件,所有在显示的marker上也需要有点击事件
markersActive.push(marker); // 这个用于点击其他marker时,清除所有点击过的marker
map.setCenter(marker.getPosition());
infoWindow.setContent(createContent(poi));
let position = new AMap.LngLat(poi.location.lng,poi.location.lat);
infoWindow.open(map, position);
}
function createContent(poi:any) { //信息窗体内容
var s = [];
s.push("<b>名称:" + poi.name+"</b>");
s.push("地址:" + poi.address);
s.push("电话:" + poi.tel);
s.push("类型:" + poi.type);
return s.join("<br>");
}
}
/* 搜索 */
let searchPosition = (search: string) => {
clearMarker();
clearInfoWindow();
AMap.plugin(["AMap.PlaceSearch"], function() {
placeSearch = null; // 必须要清空,否则会出错
placeSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 30, // 单页显示结果条数
pageIndex: 1, // 页码
city: city.value, // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
// map: map, // 展现结果的地图实例 这里需要注释掉,否则显示的结果会是默认的搜索结果样式,不是自定义的marker样式(踩坑点)
// panel: "panel", // 结果列表将在此容器中进行展示。
zoom: 12, // 初始化地图层级
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
//关键字查询
// placeSearch.search(search);
placeSearch.search(search,(status1:any,result1:any)=>{
console.log("查询信息:",status1,result1);
if(status1 == "error"){
ElMessage.warning(`信息查询错误,“${status1}=>${result1}”`)
return;
}
if(!result1.poiList.pois ||result1.poiList.pois.length == 0){
ElMessage.warning("没有查询到信息!");
return;
}
var pois = result1.poiList.pois;
for(var i = 0; i < pois.length; i++){
var poi = pois[i];
markers[i] = new AMap.Marker({
position: poi.location, // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
title: poi.name,
map: map,
icon: new AMap.Icon({
// 图标尺寸
size: new AMap.Size(32, 32),
// 图标的取图地址
// image: '../../assets/imgs/map-landmark.png',
image: '../../../src/assets/imgs/map-landmark.png',
// 图标所用图片大小
imageSize: new AMap.Size(32, 32),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
}),
extData: {
poi: poi
}
});
markers[i].on('click', markerClick)
}
map.setFitView();
});
});
}
onMounted(()=> {
uploadGDMap();
})
onBeforeUnmount(()=>{
map.destroy();
map = null;
placeSearch = null;
markers = null;
markersActive = null;
infoWindow = null;
})
/* ************* 地图展示 ************** end ******* */