百度地图API中路线规划的调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
        src="http://api.map.baidu.com/directionlite/v1/driving?origin=40.01116,116.339303&destination=39.936404,116.452562&ak=CFFvAGC2iFzI5tEPXGUWkGD9NZ5uleIs"></script>
    <title>路线规划</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // 获取到webview 通过 url 携带的坐标参数
    var paramsArr = window.location.search.substring(1).split(',')

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(41.889899, 12.475339), 18);//设置
    var lng, lat;
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            map.clearOverlays();//清除地图上所有覆盖物
            lng = r.point.lng
            lat = r.point.lat
            var p1 = new BMap.Point(lng, lat);
            var p2 = new BMap.Point(paramsArr[0], paramsArr[1]);

            var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
            driving.search(p1, p2);
        }
        else {
            alert('failed' + this.getStatus());
        }
    }, { enableHighAccuracy: true })
  
    ##导航功能 --- 轮循重新规划路线,但是会重置地图的缩放等级。轮循在当前位置创建标记,删除上一个标记
    window.setInterval(function () {
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                // map.clearOverlays();//清除地图上所有覆盖物
                lng = r.point.lng
                lat = r.point.lat
                //创建标注位置
                var pt = new BMap.Point(lng, lat);
                var myIcon = new BMap.Icon("../../static/img/Location1.png", new BMap.Size(20, 25), { anchor: new BMap.Size(5, 20), infoWindowAnchor: new BMap.Size(10, 0) });
                var marker2 = new BMap.Marker(pt, { icon: myIcon });  // 创建标注
                //移除上一个标记
                map.removeOverlay(allOverlay[3])
                map.addOverlay(marker2); //方法向地图中添加单个覆盖物时会触发此事件,将标注添加到地图中
            }
            else {
                alert('failed' + this.getStatus());
            }
        }, { enableHighAccuracy: true })
        var allOverlay = map.getOverlays();
    }, 10000)

</script>

输出

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。