vue3使用高德地图API-自定义搜索并加载marker、点击marker显示infoWindow（踩坑日记）

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("名称：" + poi.name+"");
        s.push("地址：" + poi.address);
        s.push("电话：" + poi.tel);
        s.push("类型：" + poi.type);
        return s.join("
");
    }
}
/* 搜索 */
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 ******* */