百度地图标注点增加数字
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 } ?>
知识点
参考文档:
- http://lbsyun.baidu.com/index.php?title=jspopular/guide/mark
- 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)