为地图批量添加标注
这一节我们将在地图上标出我们获取的到旅馆位置
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);