Home > Developer > JavaScript
Paste it down:
JS Code paste:
<body>
<div id= "Div-map" ></div>
</body>
<script type= "Text/javascript" >
$ (function () {
Baidu Map API Features
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,//sync request
URL: "${ctx}/mapdata",
timeout:5000,
Success:function (res) {
var data = Json.parse (res);
Map.clearoverlays ();
var ncontent = "This member is a non-real name member!" ";
var content= "";
var opts = {
WIDTH:200,
HEIGHT:120,
Title: "<strong style=\" font-size:20px;font-weight:bold\ "> member Info </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); Create a callout
var scontent = ' <div> ';
Scontent + = ' Scontent + = '
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);
Redraw the picture after loading Infowindow
document.getElementById (' Imgdemo '). onload = function () {
Infowindow.redraw (); Prevents the picture from being generated when the image is not loaded and the height of the information frame is smaller than the total height of the picture, causing the image to be partially hidden
}
});
}
}
}
}
});
}
});
</script>
Interested can refer to the Baidu API document learning: http://developer.baidu.com/map/jsdemo.htm
Baidu Map API JavaScript shows people distribution information
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
