百度地圖API JavaScript顯示人員分布信息
效果圖貼下：
js代碼貼下：
<body>
<div id="div-map"></div>
</body>
</html>
<script type="text/javascript">
$(function(){
// 百度地圖API功能
var map = new BMap.Map("div-map");
map.centerAndZoom(new BMap.Point(106.530635013,34.640738612), 6);
map.enableScrollWheelZoom();
refreshData();
setInterval(refreshData,600000);
function refreshData(){
$.ajax({
type : "POST",
async : false, //同步請求
url : "${ctx}/mapData",
timeout:5000,
success:function(res){
var data = JSON.parse(res);
map.clearOverlays();
var nContent = "此會員為未實名會員！";
var content="";
var opts = {
width: 200,
height: 120,
title: "<strong style=\"font-size:20px;font-weight:bold\">會員信息</strong>",
enableMessage: true,
message: ""
}
if (data.obj && data.obj.list.length > 0) {
for(var idx = 0;idx<data.obj.list.length;idx++) {
var pt = new BMap.Point(data.obj.list[idx].lng, data.obj.list[idx].lat);
var marker = new BMap.Marker(pt); // 創建標註
var sContent = ‘<div>‘;
sContent += ‘ <img style="float:left;margin:4px" id="imgDemo" src="‘ + data.obj.list[idx].memberHeadImgUrl + ‘" width="80" height="80" title="頭像"/>‘;
sContent += ‘ <h4 style="margin:0 0 5px 0;padding:0.2em 0">‘ + data.obj.list[idx].memberRealname + ‘</h4>‘;
sContent += ‘ <p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">‘ + data.obj.list[idx].memberMobile + ‘</p>‘;
sContent += ‘ </div>‘;
if (data.obj.list[idx].memberMobile==null) {
content=nContent;
} else {
content=sContent;
}
map.addOverlay(marker);
addClickHandler(content,marker);
function addClickHandler(content,marker){
marker.addEventListener("click",function(){
var infoWindow = new BMap.InfoWindow(content,opts);
this.openInfoWindow(infoWindow,pt);
//圖片加載完畢重繪infowindow
document.getElementById(‘imgDemo‘).onload = function (){
infoWindow.redraw(); //防止在網速較慢，圖片未加載時，生成的信息框高度比圖片的總高度小，導致圖片部分被隱藏
}
});
}
}
}
}
});
}
});
</script>
有興趣的可以參考百度API文檔學習：http://developer.baidu.com/map/jsdemo.htm
百度地圖API JavaScript顯示人員分布信息