百度API使用--javascript api進行多點定位

  使用百度地圖提供的javascript api，給定多點的經緯度坐標，在百度地圖上

顯示這些坐標點。

  其中包括各個點自適應地圖顯示，自定義坐標點的圖標，以及各個點之間添加折線。

實現的效果如下圖：

 

具體步驟如下：

1.頁面引用百度地圖api腳本

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>

其中ak為你申請的百度api密鑰。申請ak地址： http://lbsyun.baidu.com/apiconsole/key?application=key

2.根據各個點自適應顯示地圖：

        //根據各個點自適應顯示地圖
        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.添加多個坐標點、自定義坐標點的圖標：

        //添加多個點
        for (var i = 0; i < points.length; i++) {
            var item = points[i];
            var p = new BMap.Point(item.lng, item.lat);
            //自定義點圖標
            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);              
        }

4.添加坐標點之間的折線：

        //添加折線
        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);   

　

總體代碼：

<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}];
        //根據各個點自適應顯示地圖
        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);
        //添加多個點
        for (var i = 0; i < points.length; i++) {
            var item = points[i];
            var p = new BMap.Point(item.lng, item.lat);
            pointArray[i] = p;
            //自定義點圖標
            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);              
        }
        //添加折線
        var polyline = new BMap.Polyline(pointArray, { strokeColor: "#5298FF", strokeWeight: 6, strokeOpacity: 1.0 });   
        map.addOverlay(polyline);   
    };
</script>

 

百度地圖JavaScript Api開發平台鏈接： http://lbsyun.baidu.com/index.php?title=jspopular