Baidu API uses--javascript API for multi-point positioning

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