百度API使用--javascript api进行多点定位

Posted 2020-07-30 Hello World!

  使用百度地图提供的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