使用当前坐标数组移动标记，谷歌地图答案

【问题标题】：Move marker with current array of coordinates , google maps使用当前坐标数组移动标记，谷歌地图
【发布时间】：2020-05-11 01:32:37
【问题描述】：

如何使用坐标数组在地图上移动标记
我还需要将标记的当前位置（或索引）存储在变量中
数组示例：

let data = [
 ["2019-06-28T07:33:03", 37.610225, 55.651365],
 ["2019-06-28T07:33:40", 37.6107283333333, 55.6511716666667],
 ["2019-06-28T07:33:46", 37.610745,55.6510383333333],
 ["2019-06-28T07:33:47",37.610785,55.6510233333333],
 ["2019-06-28T07:33:48",37.61083,55.65103]
];

我初始化地图并使用基于数组的折线绘制路径：

function initMap() {

//start position
   const startPosition ={lat:data[0][2],lng:data[0][1]}
   let map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: myLocation,             
            });
   const pathCoordinate = [];
   data.forEach(path => {
                pathCoordinate.push({
                    lat: path[2],
                    lng: path[1]
                });
            });
// draw the path
   const principePath = new google.maps.Polyline({
                path: pathCoordinate,
                geodesic: true,
                strokeColor: "#2A7884",
                strokeOpacity: 1.0,
                strokeWeight: 3,
                icons: [
                    {
                        icon: currentPosition,
                        offset: "100%"
                    }
                ]
            });
    principePath.setMap(map);
}

【问题讨论】：

在你的脚本中添加一个额外的变量来记录你当前的索引并在你遍历你的折线时不断更新它。现在当你点击暂停时，你就知道你的索引，你可以从那里开始
但是如何实现呢？我必须动画的功能只是使用偏移量移动符号
请提供一个minimal reproducible example 来证明该问题。您应该能够保存/恢复 count 值。
我提供了最重要的部分
如果您阅读minimal reproducible example 页面，您将了解到您需要提供一个最小的、完整的和可重现的示例，包括一个清晰的问题描述。问题是什么？什么不起作用？你得到什么错误？等等

标签： javascript google-maps

【解决方案1】：

您可以使用 for 循环 并在数组中的每个点上更改标记的位置。这是一个演示解决方案的complete fiddle。以下是我如何在您的代码中执行此操作的细分：

添加此行以创建标记并在数组的第一个值上设置位置。

    var marker = new google.maps.Marker({
          position: pathCoordinate[0],
          map: map,
          title: 'Hello World!'
        });

通过标记和路径坐标调用移动标记的函数。

    moveMarker(marker, pathCoordinate);

moveMarker 函数应包含以下内容：获取数组的长度。

var len = pathCoordinate.length

创建一个 for 循环 并让 i 从数组的第二个值（即索引 1）开始，因为它将是下一个点。您还可以像 console.log 一样获取坐标的当前值，然后创建一个函数，在更改数组中标记的位置时设置间隔。我从this answer 了解到如何设置超时功能。

for (i = 1; i < len; i++) {
 console.log(pathCoordinate[i]);
    (function(i){
       setTimeout(function(){
        marker.setPosition(pathCoordinate[i]);
     }, 1000 * i);
   }(i)); 
}

希望这会有所帮助！

【讨论】：