百度地图api标注物label文字换行

最新推荐文章于 2024-04-23 16:17:39 发布

橙子yq

最新推荐文章于 2024-04-23 16:17:39 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/m0_49031950/article/details/127904426

版权

百度地图专栏收录该内容

5 篇文章 0 订阅

订阅专栏

// 创建地图实例 
var map = new BMapGL.Map("container");
// 创建点坐标 
var point = new BMapGL.Point(116.404, 39.915);
// 初始化地图，设置中心点坐标和地图级别 (第二个参数为缩放级别0-19)
map.centerAndZoom(point, 15);
// 是否通过滚轮控制大小
// map.enableScrollWheelZoom(true);
// 关于标注
var point = new BMapGL.Point(116.404, 39.915);//默认  可以通过Icon类来指定自定义图标
         var marker = new BMapGL.Marker(point);
         const aa = 'LB_李白'
         const bb = '2022年12月31日 16:04'
         const cc = `<div>${aa}</div><div>${bb}</div>`
         var label = new BMapGL.Label(cc,{offset:new BMapGL.Size(-44,-34)});//标注标签 
        //  标注样式调整
        const img11 = "./images/02.jpg"
         label.setStyle({
            'background': `url(${img11}) no-repeat`,
            fontSize: '13px',
            color: '#fff',
            border: 0,
            padding: '6px 4px 10px',
            'line-height': '14px',
            // width:'130px',
            // height: '70px'
            'background-size': '100% 100%'
         }) 
         marker.setLabel(label)//设置标注说明

label是可直接解析html的, 换行直接在模板字符串写块级标签就能实现换行 (^ ^) ~~