高德地图自定义背景图+自定义文字，marker自定义

最新推荐文章于 2025-02-08 02:42:15 发布

春晓_春眠花落

最新推荐文章于 2025-02-08 02:42:15 发布

阅读量3.1k

点赞数

分类专栏：地图文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_49668076/article/details/120132882

版权

地图专栏收录该内容

10 篇文章

订阅专栏

 mounted() {
    this.addMarker()
  },

//实例化marker

 addMarker() {
        let me = this;
       var position = new AMap.LngLat(119.440933, 32.467529);
       // 点标记显示内容，HTML要素字符串
    var markerContent = '' +
        '<div class="custom-content-marker">' +
        '  <p>严重拥堵：长度686米' +'</p>'+
        '</div>';
    var marker = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30)
    });  
    // 将 markers 添加到地图
    me.map.add( marker);
    },

背景图或者图片一定要是网络图片，本地图片转换网络图片可以看网上的教程。

<style lang="less" >
   .custom-content-marker {
            position: relative;
            width: 80px;
            height: 40px;
            background: url('https://static01.imgkr.com/temp/a1516eb4f6fc4fd188da13de58a3a214.png');
            background-size:100% 100% ;
        }

        .custom-content-marker img {
            width: 100%;
            height: 100%;
        }   
        </style>