1. 程式人生 > >百度地圖API JavaScript顯示人員分布信息

百度地圖API JavaScript顯示人員分布信息

mem tel 部分 lin async -m .ajax var cti

效果圖貼下:

技術分享圖片

技術分享圖片

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顯示人員分布信息