Using the JavaScript API provided by Baidu Maps, given the multi-point latitude and longitude coordinates, on the Baidu map
Display these coordinate points.
This includes the individual point Adaptive map display , the icon for the custom coordinate point , and the addition of polylines between each point.
The effect of the implementation is as follows:
The steps are as follows:
1. Page reference Baidu Map API script
<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= your key " ></script >
Where AK is your application for the Baidu API key. Application for AK Address: Http://lbsyun.baidu.com/apiconsole/key?application=key
2. Adaptive display of the map according to each point:
Adaptive display of the map based on individual points var points = [{"lat": 32.320054, "LNG": 120.620204},{"lat": 32.320054, "LNG": 120.635204},{"lat" : 32.330054, "LNG": 120.630204}]; var map = new Bmap.map ("Allmap"); var view = Map.getviewport (points); var mapzoom = view.zoom; var centerpoint = View.center; Map.centerandzoom (CenterPoint, mapzoom); Map.enablescrollwheelzoom (TRUE);
3. Add icons for multiple coordinate points, custom coordinate points:
Add multiple points for (var i = 0; i < points.length; i++) { var item = points[i]; var p = new Bmap.point (ITEM.LNG, Item.lat); Custom point icon var iconUrl = "Point.jpg"; var Myicon = new Bmap.icon (ICONURL, new bmap.size (+)); var marker = new Bmap.marker (p, {Icon:myicon}); Map.addoverlay (marker); }
4. Add a polyline between the coordinate points:
Add Polyline var pointarray = new Array (); pointarray[0]= new Bmap.point (120.620204,32.320054); pointarray[1]= new Bmap.point (120.635204,32.320054); pointarray[2]= new Bmap.point (120.630204,32.330054); var polyline = new Bmap.polyline (Pointarray, {strokecolor: "#5298FF", Strokeweight:6, strokeopacity:1.0}); Map.addoverlay (polyline);
Overall code:
<script type= "Text/javascript" > window.onload = function () {var pointarray = new Array (); var points = [{"lat": 32.320054, "LNG": 120.620204},{"lat": 32.320054, "LNG": 120.635204},{"lat": 32.330054, "LNG" : 120.630204}]; Adaptive display of map var map = new Bmap.map ("Allmap") according to individual points; var view = Map.getviewport (points); var mapzoom = View.zoom; var centerpoint = View.center; Map.centerandzoom (CenterPoint, mapzoom); Map.enablescrollwheelzoom (TRUE); Add multiple points for (var i = 0; i < points.length; i++) {var item = Points[i]; var p = new Bmap.point (ITEM.LNG, Item.lat); Pointarray[i] = p; Custom point icon var iconUrl = "Point.jpg"; var Myicon = new Bmap.icon (ICONURL, New Bmap.size (40, 80)); var marker = new Bmap.marker (p, {Icon:myicon}); Map.addoverlay (marker); }//Add polyline var polyline = new Bmap.polyline (pointarray, {strokecolor: "#5298FF", Strokeweight:6, strokeopacity:1.0}); Map.addoverlay (polyline); };</script>
Baidu map JavaScript API development Platform Link : http://lbsyun.baidu.com/index.php?title=jspopular
Baidu API uses--javascript API for multi-point positioning