Question

我正在谷歌地图上创建一条路线。该路线有一个起点和终点，沿途有大约10个航路点。

我想做的是在这条路线上“走路”，这样做我想显示一个标记（取决于以米为单位的距离）到目前为止我走了多远。

我已经完成所有设置，路线，以米为单位的距离，我唯一无法工作的是在路线上添加标记。

起点（0）---------（标记300米）--------------------终点（1000）

https://developers.google.com/maps/documentation/javascript/directions

我正在使用记录的代码，这是我的jscode fwiw

// I'm getting a startpoint (stockholm) endpoint (italy) and 
// array of 10 waypoints of other places in europe along the way

function initMap(startCoordinate, endCoordinate, waypoints) {
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: 50.60, lng: 8.36 },
    mapTypeId: 'terrain'
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: false,
    map: map,
    panel: document.getElementById('right-panel')
});

var start = new google.maps.LatLng(startCoordinate);
var end = new google.maps.LatLng(endCoordinate);

directionsDisplay.addListener('directions_changed', function () {
    computeTotalDistance(directionsDisplay.getDirections());
});

displayRoute(start, end, directionsService, directionsDisplay, waypoints);
}

function displayRoute(origin, destination, service, display, waypoints) {

if (waypoints.length > 1)
{
    waypoints.shift();
    waypoints.pop();
}

service.route({
    origin: 'Centralplan 15, 111 20 Stockholm',
    destination: 'Piazza Giuseppe Garibaldi, 80142 Napoli, Italië',
    waypoints: waypoints,
    travelMode: 'DRIVING',
    avoidTolls: true
}, function (response, status) {
    if (status === 'OK') {
        display.setDirections(response);
    } else {
        console.log('Could not display directions due to: ' + status);
        console.log(response);
    }
});

我调查了http://www.geocodezip.com/v3_animate_marker_directions.html，但这是路线上的动画，我只需要一个静止标记。然而它确实在路线上放置了一个标记，我似乎无法弄清楚它是如何做到的。

Answer 1

您基本上需要遍历路线的DirectionsLegs，然后在其DirectionsSteps和可能的子步骤（DirectionsStep中有一个DirectionsSteps数组），直到找到将你的A点作为start_location。

因此，您现在将拥有相当于行的一部分，并且能够执行描述here的内容。

谷歌地图API路线的多个标记，按距离绘制

1 个答案: