vue3高德地图多个点标记/窗口信息/点标记自定义图片不显示问题

首先你要安装高德地图,在我的另一篇文章里面有讲:

(4条消息) 在vue3项目中使用新版高德地图_奋斗不息,编码不止!的博客-CSDN博客

 在使用MarKer中,我们会自定义图标,但是会遇到图片无法显示的问题:

 解决办法: 

// 我们把需要自定义的图片引入进来
import iconTeam from '@/assets/logo/logo2.png';

// 直接在MarKer中使用即可
const marker = new AMap.Marker({
      position: new AMap.LngLat(data.lnt,data.lat),
      title: data.content, // 鼠标滑过点标记时的文字提示
      icon: iconTeam, // 引入上面的图片
      offset: new AMap.Pixel(-15,-15)
  })

效果图:

 下面是多个点标记和信息窗口的完整代码:

<template>
    <div class="app-container">
        <div style="background-color: #ffffff;position:relative;">
            <div id="container"></div>
        </div>
    </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import iconTeam from '@/assets/logo/logo2.png';
import {ref} from "vue";


window._AMapSecurityConfig = {
    securityJsCode: '8e920f73exxxxxxxx2ea6662eefc476',
}
AMapLoader.load({
    key:"e4e3d44a98xxxxxxxx1493450032bbec5", // 申请好的Web端开发者Key，首次调用 load 时必填
    version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
    const map = new AMap.Map("container",{  //设置地图容器id
        viewMode:"3D",    //是否为3D地图模式
        zoom:6,           //初始化地图级别
        center:[113.808299,34.791787], //初始化地图中心点位置
    });

    // 点标记
    const list = ref(
        [
            {
               lnt:116.724502,
               lat:39.905023,
               content:'北京市政府',
            },
            {
                lnt:121.473667,
                lat:31.230525,
                content:'上海市政府',
            },
            {
                lnt:117.201509,
                lat:39.085318,
                content:'天津市政府',
            },
            {
                lnt:103.834228,
                lat:36.060798,
                content:'兰州市政府',
            },
            {
                lnt:108.939645,
                lat:34.343207,
                content:'西安市政府',
            },
            {
                lnt:112.549656,
                lat:37.870451,
                content:'太原市政府',
            },
            {
                lnt:114.304569,
                lat:30.593354,
                content:'武汉市政府',
            },
        ]
    )
    // 点标记显示内容，HTML要素字符串(官方例子)
    /*const markerContent = ref('' +
        '<div class="custom-content-marker">' +
        '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
        '</div>');*/

    list.value.map((data) => {
        const marker = new AMap.Marker({
            position: new AMap.LngLat(data.lnt,data.lat),
            title: data.content, // 鼠标滑过点标记时的文字提示
            icon: iconTeam, // 引入上面的图片
            // content: markerContent.value, // 引入上面HTML要素字符串
            offset: new AMap.Pixel(-15,-15)
        })
        // 窗口信息
        const infoWindow = new AMap.InfoWindow({
            isCustom: true, // 自定义窗口,窗口外框以及内容完全按照content所设的值添加
            closeWhenClickMap: true, // 是否在鼠标点击地图关闭窗口
            content: `<div style="background-color: red;width: 80px;height: 80px;border-radius: 6px;line-height: 80px;text-align: center;font-size:12px;">${data.content}</div>`,
            offset: new AMap.Pixel(0,-15)
        })
        // 给marker添加click事件
        marker.on("click",(e) => {
            infoWindow.open(
                map,
                // 窗口信息的位置
                marker.getPosition(data.lnt, data.lat)
            );
        })
        // 给map添加zoomend事件,当缩放级别时触发
        map.on("zoomend",(e) => {
            // 关闭信息窗体
            map.clearInfoWindow(infoWindow);
        })
        marker.setMap(map);
    })
}).catch(e=>{
    console.log(e);
})

</script>
<style>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>

效果图: