LOADING STUFF...

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

–>

  使用百度地图提供的javascript api,给定多点的经纬度坐标,在百度地图上

显示这些坐标点。

  其中包括各个点自适应地图显示自定义坐标点的图标,以及各个点之间添加折线

实现的效果如下图:

百度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

 

原文链接:https://www.cnblogs.com/miaosha5s/p/5618768.html
本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章