百度地图API实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

为地图批量添加标注

这一节我们将在地图上标出我们获取的到旅馆位置

1、原理

我们可以通过for循环的方式为地图批量添加标注

2、设置点的新图标

我们可以通过Icon(url:String, size:Size[, opts:IconOptions])函数构造出一个Icon对象并且我们能通过setImageSize(offset:Size)改变图标大小, 再通过marker的setIcon(icon:Icon)将图标加载到地图上去

想要改变图标的小伙伴们可以自己尝试改变图标,在课程中我仅使用默认图标,见谅

例如:

var marker = new BMap.Marker(point);  
map.addOverlay(marker);   
marker.setAnimation(BMAP_ANIMATION_DROP);
var icon  = new BMap.Icon("img/c3_3.jpg", new BMap.Size(50,100));
icon.setImageSize(new BMap.Size(50,100));
marker.setIcon(icon);

3、批量添加标注

我们只需要对获取到的hotelInfo进行循环即可

function addMarker(point){
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
}
getHotelInfo(url,function(err,hotelInfo){
    insertData(err,hotelInfo);
    if(!err) {
        for (var i = 0; i < hotelInfo.length; i++) {
            var point = new BMap.Point(hotelInfo[i].location[0],hotelInfo[i].location[1]);
            addMarker(point);
        }
    }
});
在右方填入代码,将标注添加到地图上
addMarker(point);