折线上的图标位置

时间:2017-09-10 16:48:05

标签: google-maps-api-3 google-polyline

上下文:我在折线上设置一个动画图标,代表一辆从A点到B点的汽车。在某个时间点,汽车的燃油含量很低,因此,我需要去到加油站,然后继续点B。

因此,当汽车燃油不足时,我计算汽车的当前位置并从当前位置向B点发出指示请求,加油站作为一个航点。

一旦我得到答案,我就会更新汽车动画的折线(我保留完成的部件并用新路线替换其余部分)。

问题是计算出的汽车“当前位置”太不准确了(即计算出的位置与折线上图标的实际位置不同)。

这是一个最小的工作示例及其fiddle

var map;
var line;
var first_path;

function initMap() {
    pointA = new google.maps.LatLng(50.931300, 4.226360);
    pointB = new google.maps.LatLng(48.858370, 2.294481);

    var myOptions = {
        zoom: 7,
        center: pointA
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);

    // Instantiate a directions service.
    var directionsService = new google.maps.DirectionsService,
        directionsDisplay = new google.maps.DirectionsRenderer({
            map: map
        }),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "A",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "B",
            map: map
        });

    // get route from A to B
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}



function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
    directionsService.route({
        origin: pointA,
        destination: pointB,
        avoidTolls: true,
        avoidHighways: false,
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            //directionsDisplay.setDirections(response);

            console.debug(response);
            first_path = response.routes[0].overview_path;

            // Make polyline on the path
            line = new google.maps.Polyline({
                path: first_path,
                strokeColor: 'black',
                strokeOpacity: 1,
                icons: [{
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 5,
                        strokeColor: '#393',
                        strokeOpacity: 0.8
                    },
                    offset: '90%'
                }]
            });

            line.setMap(map);

            // Add a marker at the same position as the icon --> INACCURATE
            var loc = line.GetPointAtDistance(line.Distance() * 0.9);
            var marker = new google.maps.Marker({
                      position: loc,
                      map: map,
                      title: 'Wrong position!'
                    });

        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

initMap();

请注意,我正在使用Epoly V3库进行此计算。

是否还有其他库或方法来计算可能有用的当前位置?

0 个答案:

没有答案
相关问题