效果图贴下：
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
原文地址：https://www.cnblogs.com/ljh-/p/9228632.html