百度地图标注点增加数字

2020-12-20 10:56:16

代码

var map = new BMap.Map("container"); //选择容器初始化地图类
var point = new BMap.Point(<?php echo $map;?>); //$map为坐标值
map.enableScrollWheelZoom(true); //允许鼠标缩放
map.centerAndZoom(point,8); //地图缩放比例 数字越小缩小越大
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
map.addControl(new BMap.CityListControl({anchor: BMAP_ANCHOR_TOP_RIGHT,offset: BMap.Size(50, 20)}));
map.addOverlay(new BMap.Marker(point));
<?php foreach($com_list as $k=>$v){ ?> //$com_list是坐标点数组
    var zuobiao = new BMap.Point(<?php echo $v['map']; ?>); 
    var marker = new BMap.Marker(zuobiao);        // 创建标注    
    var label = new BMap.Label(<?php echo $k+1; ?>,{
        <?php if($k<9){ ?>
        offset:new BMap.Size(4,4)
        <?php }else{ ?>
            offset:new BMap.Size(1,4)
        <?php } ?>
    });
    label.setStyle({
        background:'none',color:'#ffffff',border:'none'
    });
    marker.setLabel(label);
    map.addOverlay(marker);   
<?php } ?>

知识点

参考文档:

  1. http://lbsyun.baidu.com/index.php?title=jspopular/guide/mark
  2. http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b2

主要类

定义坐标点 new BMap.Point(120.278483,32.050368)

根据坐标点创建标注:new BMap.Marker(zuobiao)

创建文本对象 new BMap.Label(2,{offst:new BMap.Size(4,4)}) 第一个参数为文本内容,第二个参数为文字相对默认位置的偏移量。此处因为1和11文字长度不一样,所以做了优化。

设置文本对象的样式label.setStyle({})

将文本添加到标注 marker.setLabel(label)

将标注渲染到地图上 map.addOverlay(marker)

致知网络科技© 2020-2025 鲁ICP备20031360号-2