百度地图label - 添加标注文本

最新推荐文章于 2024-05-18 15:32:42 发布

策码奔腾---嘚驾~

最新推荐文章于 2024-05-18 15:32:42 发布

阅读量1.2k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_42489210/article/details/118150528

版权

本文档展示了如何在百度地图上创建自定义标注点，并添加文本内容及个性化样式。通过设置Marker和Label，可以实现点的定位、图标设置、文本偏移以及文本内容和样式的调整，从而在地图上清晰地展示特定信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图label - 添加标注文本

// 创建点
    var marker1 = new BMap.Marker(new BMap.Point(X,Y), {
        icon:myIcon,
        offset: new BMap.Size(0,0)
    }); 


var markerText = {
        position: marker1,    // 指定文本标注所在的地理位置
        offset: new BMap.Size(0, 36)    //设置文本偏移量
    };



var content =
        `<div style="width:200px;height:20px;line-height:20px;position:absolute;left:50%;margin-left:-86px;text-align:center;">` +
            '<span style="background:rgba(0, 28, 62, 0.8);color:#fff;font-size:12px;padding:4px 10px;">'+'内容内容内容内容'+'</span>' +
        '</div>';


var labelGoodUp = new BMap.Label(content, markerText);

labelGoodUp.setStyle({
        padding: '0',
        border: 'none'

        // width: 'auto',
        // height: 'auto',
        // fontSize: "12px",
        // lineHeight: "30px",
        // textAlign: "center",
        // maxWidth:'none',
        // fontFamily: "微软雅黑",
        // padding: '0 10px',
        // border: "none",
        // color:"#fff",
        // backgroundColor: "rgba(0, 28, 62, 0.8)",
        // borderRadius: "4px",

        // backgroundImage: "url('../img/track_positioning/marker.png')",
        // backgroundPosition: "center bottom",
        // backgroundRepeat: "no-repeat",

        // transform: 'translateX(-30%)',
        // backgroundSize:'100% 100%'
        // position: 'absolute',
        // left: '50%',
        // marginLeft: '-100px'

});

marker1.setLabel(labelGoodUp);  // 添加到 marker 的点中

map.addOverlay(marker1);