Tidy up the Baidu map written yesterday
The project began to write a Baidu map, but the speed of the slow is simply so yesterday will Baidu map API of the massive dot wrote 1 seconds ah o.o
OK, write down
This is required JS
<!--add Baidu Map--
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= key" ></script>
<script src= ". /.. /public/js/geturlparam.js "type=" Text/javascript "></script>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>
HTML code
<body onload= "init ()" >
<form id= "Form1" runat= "Server" >
<div style= "width:100%" id= "container" ></div>
</div>
</form>
</body>
Key code
<script>
Default maximum
$ (document). Ready (function () {
var height=geturlparam ("height");
if (height!=null&&height!= "undefined" &&height!= "") {
$ ("#container"). CSS ("height", height+ "px");
}
else{
$ ("#container"). CSS ("height", $ (document.body). Height ());
}
});
var init = function () {
var Bumenid =document.getelementbyid ("Hiddtext"). Value; Department ID
var typeid =document.getelementbyid ("SelType"). Value; Type ID
if ("<%=scvalue%>" ==1) {//First load
Bumenid=-1;
}
var map = new Bmap.map ("container", {}); Create a Map instance
Map.centerandzoom (New Bmap.point (113.376170,22.521573), 5); Initialize map, set center point coordinates and map level
Map.enablescrollwheelzoom (); Enable wheel zoom in and zoom out
if (document.createelement (' canvas '). GetContext) {//To determine if the current browser supports plotting of large amounts of points
$.ajax ({
URL: '/companyuser/action.ashx? Action=oa_map_infohaixiang&id= ' +bumenid+ "&typeid=" +typeid,//with reference general handler
Type: ' POST ',
DataType: ' HTML ',
ContentType: "Application/json; Charset=utf-8 ",
Error:function (XMLHttpRequest, Textstatus, Errorthrown) {Parent.error ("System proposal Management (submission) data loading error");},
Success:function (Result) {
if (result!= "") {
var data=eval ("(" +result+ ")"); Result is similar to this [[Longitude, Dimension, 1]] This 1 I still do not understand what is
var points = []; Add massive point data
for (var i = 0; i < data.length; i++) {
Points.push (New Bmap.point (data[i][0],data[i][1]));
}
var options = {
Size:bmap_point_size_small,
Shape:bmap_point_shape_star,
Color: ' #d340c3 '
}
var pointcollection = new Bmap.pointcollection (points, options); Initialize PointCollection
Pointcollection.addeventlistener (' click ', Function (e) {
var name= "";//Name
var ads= "";//Address
var tel= "";//Telephone
About customizing information modify JSON [[Longitude, Dimension, 1, name, address, phone]]
Cyclic detection value
for (var i = 0; i < data.length; i++) {
Points.push (New Bmap.point (data[i][0],data[i][1]));
if (Data[i][0]==e.point.lng&&data[i][1]==e.point.lat) {//Longitude = = clicked, dimension
NAME=DATA[I][3];
ADS=DATA[I][4];
TEL=DATA[I][5];
Break
}
}
var point = new Bmap.point (E.POINT.LNG, E.point.lat);
var opts = {
WIDTH:250,//Information window width
HEIGHT:70,//Information window height
Title: "",//Information window caption
enablemessage:false,//set Allow Information window to send short interest
}
var Infowindow = new Bmap.infowindow ("Name:" +name+ "<br/> Address:" +ads+ "<br/> Tel:" +tel, opts);
Map.openinfowindow (Infowindow, point);
});
Map.addoverlay (pointcollection); Add Overlay
}
}
});
} else {
Alert (' Please view this example in Chrome, Safari, ie8+ above);
}
}
</script>
Just Jiangzi. Waste a lot of time on this map--you need to keep trying.
Today, the salary of 15th o.o haha haha tomorrow to buy a mobile phone for mom and dad to think that I feel good happy but because the ability of limited wages is not high can not buy special good mobile phone only select red Rice note for this remember must work I will give parents to buy better
2015-01-15 Wei.
2015-01-15 Baidu Map API new mass Point
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
