A recent project needs to use the map's positioning and tagging capabilities, and would have considered using the Google Map API. But at home the speed is really slow, sometimes loaded in half the wrong, but can be through Google Agent to solve the problem of domestic access, but this is still very troublesome. So I decided to use the Baidu Map API to achieve. All right, let's go straight ahead, the area of the map is random.
Completed features:
1. Locate the map based on the address provided
2. Create a polygon area that can be flexibly labeled, for example with respect to some distribution ranges, which can be done by marking.
The following steps are required to achieve the above effects:
1. First apply for access to the Baidu Map API Key (AK), you can apply through this address: Http://lbsyun.baidu.com/apiconsole/key?application=key
When you apply for key you need to be sure what type of application you have for this key, server or mobile ... can refer to:
2. Direct introduction of Baidu V1.3 interface file in your project
<src= "Http://api.map.baidu.com/api?v=1.3&ak=you key" type = "Text/javascript" ></ Script >
If you introduce a version less than 1.3, then this need to replace the AK key is good, you key is the application of the key, where my key application type is for browser.
3.javascript Code Section
varMap =NewBmap.map ("Container"); varMyPoint =NewBmap.point (116.404, 39.915);//Create point coordinatesMap.centerandzoom (mypoint,15);//initialize map, set center point coordinates and map level //Map.setmaptype (BMAP_SATELLITE_MAP); set Map Type varMarker =NewBmap.marker (MyPoint); Map.addoverlay (marker); Marker.addeventlistener ("Click",function(){ varInfowin =NewBmap.infowindow ("Your Show Information");//Define display information This. Openinfowindow (Infowin); }); varX1 = mypoint.lat+0.002; varx2 = mypoint.lat-0.002; varY1 = mypoint.lng + 0.002; vary2 = mypoint.lng-0.002; varSecring = [ NewBmap.point (y1, X1),//Longitude Latitude Newbmap.point (y1, x2),Newbmap.point (y2, x2),Newbmap.point (y2, X1)]; //Creating polygons varSecringpolygon =NewBmap.polygon (secring, {strokecolor:"#f50704", FillColor:"#FF0000", Strokeweight:2, fillopacity:0, strokeopacity:0.8 } ); Map.addoverlay (Secringpolygon); Map.enablescrollwheelzoom (); //Enable wheel Zoom out, disabled by defaultMap.enablecontinuouszoom ();//Enable map Inertia drag, default disable//create map instanceMap.addcontrol (NewBmap.navigationcontrol ());//Add a default zoom translation controlMap.addcontrol (NewBmap.overviewmapcontrol ({isOpen:true, anchor:bmap_anchor_bottom_right}));//Lower right corner, open
The secring part is the code that constructs the rectangular area, which is implemented by the Polygon provided in the API. The effect of the above code is that the polygon area is not free to mark. So you need to use the following code to allow the polygon area to be editable before adding secringpolygon to the map.
Secringpolygon.enableediting ();
The above code can be implemented. However, if you need to record the coordinates of each edit of the polygon, or to record the motion of the editing area, then you need to Secringpolygon add an event (mouseout), and then getpath this function to get the edited trajectory. If there is a business need, you can store the trajectory in the database, and when the next load, you can directly estimate the trajectory to secring this array, so that your marker can be displayed on the map.
//Add EventSecringpolygon.addeventlistener ("Mouseout",function(){ varPathobj =Secringpolygon.getpath (); varHtmlstr = ""; for(varIinchpathobj) { varPosition =Pathobj[i]; Htmlstr+ = Position.lng + "," +position.lat+ "<br>"; } document.getElementById (' Info '). InnerHTML =htmlstr});
This block directly outputs the post-motion trajectory to the page.
There is a given address to be marked on the map, the current use of PHP provided by the Curl interface, call Geocoder's V2 API to get the latitude and longitude of the address change.
Refer to: http://developer.baidu.com/map/webservice-geocoding.htm
The parameter format returned by the interface can be either JSON or something else. The JSON format returns the following results:
// return value without callback function { 0, result: {location : { 116.30814954222, 40.056885091681 }, 1, +, "Business building" }
The PHP code is as follows:
$address=UrlEncode($addr); $url= "http://api.map.baidu.com/geocoder/v2/?address=$address&output=json&ak=your Key "; $ch=Curl_init (); curl_setopt ($ch, Curlopt_url,$url); curl_setopt ($ch, Curlopt_returntransfer, 1); curl_setopt ($ch, Curlopt_ssl_verifyhost, 0); curl_setopt ($ch, Curlopt_ssl_verifypeer, 0); $response= Curl_exec ($ch); Curl_close ($ch); $result= Json_decode ($response,true); $lat=$result["Result"] ["Location"] ["Lat"]; $LNG=$result["Result"] ["Location"] ["LNG"];
Where your addr is the address and needs to be escaped with UrlEncode.
This allows you to obtain the longitude and latitude information for the current address, then output to the front end, and then call new bmap.point (LAT,LNG); to render.
This block you can re-encapsulate the Baidu map API, for other places in the project to use. Map API is more than that, there are many ways to directly refer to the Baidu Map API manual.
There are more demos to refer to: http://developer.baidu.com/map/jsdemo.htm
All right!!!!