带有谷歌地图API路线的多个标记，按距离绘制[重复]答案

【问题标题】：Multiple markers with google maps API route, drawn by distance [duplicate]带有谷歌地图API路线的多个标记，按距离绘制[重复]
【发布时间】：2017-08-08 07:33:16
【问题描述】：

我正在 Google 地图上创建路线。这条路线有一个起点和终点，沿途有大约 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，但这是路线上的动画，我只需要一个静止标记。但是它确实在路线上放置了一个标记，我似乎无法弄清楚它是如何做到的。

【问题讨论】：

所以你知道标记坐标但不知道如何显示它？
嗨，我不知道标记坐标，因为显示的路线是可变的。我只能得到起点和终点的坐标。两点之间的线是谷歌地图库似乎自动做的事情
我确实有应该放置标记的变量。也就是说，在 a 点和 b 点之间，假设 a 点到 b 点是 20 公里，我有一个变量说 15 公里，标记应该放置在距离 a 点 15 公里的地方，在到 b 点的路线上
看看stackoverflow.com/a/9090409/3410584
谢谢，我以前见过，但是折线与路线（方向）不同。路线示例（方向）google.nl/maps/dir/Boston,+Massachusetts,+USA/New+York,+USA/…

标签： javascript google-maps google-maps-api-3 directions

【解决方案1】：

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

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

【讨论】：