当前位置：首页 > news >正文

百度地图api文档实现任意两点之间的最短路线规划

news 来源：原创 2024/4/30 2:37:27

两个点之间的路线是使用“Marker”点连接起来的，目前还没找到改变点颜色的方法，测试过使用setStyle没有效果。

<html>
<head>
    <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: "微软雅黑";
        }

        .anchorBL {
            display: none;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=dpB1d25b7smGMe8evaIAxw881Aq3AUfb"></script>
    <title></title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("重庆", 14);
    var walking = new BMap.WalkingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });

    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    //路况
    var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例
    map.addTileLayer(traffic);                    // 将图层添加到地图上

    //浏览器定位
    /*var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }
    });
*/
    var myIcon = new BMap.Icon("../images/marker_MAN.png", new BMap.Size(20, 26));
    var _points = [];
    map.addEventListener("click", function (e) {
        var _point = {
            lng: "",
            lat: ""
        };
        _point.lng = e.point.lng;
        _point.lat = e.point.lat;
        _points.push(_point);
        map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), {icon: myIcon}));
        console.log(_points);
        // alert(e.point.lng + "," + e.point.lat);
        if (_points.length === 2) {
            var start = new BMap.Point(_points[0].lng, _points[0].lat);
            var end = new BMap.Point(_points[1].lng, _points[1].lat);
            walking.search(start, end);
            map.clearOverlays();
            _points = [];
        }
    });
</script>
</body>
</html>