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

Question

我正在 Google 地图上创建路线。该路线有起点和终点，沿途大约有 10 waypoints。

我想做的是 'walk' 虚拟地通过这条路线，这样做我想显示一个标记（取决于以米为单位的距离）到目前为止我走了多远。

我已经全部设置好，路线，以米为单位的距离，我唯一无法开始工作的是在路线上添加标记。

起点(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。

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

Multiple markers with google maps API route, drawn by distance

javascript

google-maps

google-maps-api-3

directions