百度地图api学习二

在看百度地图api的时候，有如下图一这样的效果，但是根据示例却是图二这样的效果。于是就想图二的效果是怎么实现的呢？

图一

图二

然后在看贵阳市口腔医院网站的时候看到这样的效果，

跟示例中我想要的效果完全一样，于是就f12调试代码看到这样的脚本。

//标注点数组
var markerArr = [{title:"贵阳市口腔医院兴关路总院 ",content:"地址：南明区兴关路18号<br/><br/>电话：0851-85563551，88334007<br/><br/>标签：三甲医院 口腔医院 五官科医院",point:"106.720477|26.571017",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
  var p1 = json.point.split("|")[1];
  var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});

(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
  _marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
  }
}

//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}

//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}

然后加入上面的代码，运行效果如下。

百度地图api学习二

猜你喜欢