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

2023-08-04 18:00:16

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

显示这些坐标点。

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

实现的效果如下图：

具体步骤如下：

1.页面引用百度地图api脚本

其中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

码农公寓

相关文章