在谷歌地图 JavaScript API 中每 5 秒刷新一次标记位置答案

【问题标题】：refreshing marker position every 5 seconds in google maps JavaScript API在谷歌地图 JavaScript API 中每 5 秒刷新一次标记位置
【发布时间】：2020-09-01 09:35:31
【问题描述】：

      setInterval(function () {initMap();},5000);
       //setInterval(function () {changeMarkerPosition(marker);},5000);
          var map;

          function initMap() {
            var lat = document.getElementById( 'lat' ).value;
            var lng = document.getElementById( 'lng' ).value;

            map = new google.maps.Map(
                document.getElementById('map'),
                {center: new google.maps.LatLng(lat, lng), zoom: 16});

            var iconBase =
                'https://developers.google.com/maps/documentation/javascript/examples/full/images/';

            var icons = {
              parking: {
                icon: iconBase + 'parking_lot_maps.png'
              },
              library: {
                icon: iconBase + 'library_maps.png'
              },
              info: {
                icon: iconBase + 'info-i_maps.png'
              }
            };

            var features = [
              {
                position: new google.maps.LatLng(lat, lng),
                type: 'info'
              },
            ];

            // Create markers in the map.
            for (var i = 0; i < features.length; i++) {
              var marker = new google.maps.Marker({
                position: features[i].position,
                icon: icons[features[i].type].icon,
                map: map
              });
            };
          }

这是我的代码，它每 5 秒刷新一次整个地图，而不是我想每 5 秒刷新一次标记位置，因为我从两个不断更新的输入字段中获取纬度和经度

【问题讨论】：

您每 5 秒创建一个新地图，您可以改为使用相同的地图并在同一个地图上更新标记（删除旧的，创建一个新的）。

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

【解决方案1】：

请注意，每次调用 google.maps.Map() 类时，都会创建一个地图加载，计费为 Dynamic Maps SKU。您可以利用setPosition method of the google.maps.Marker class，而不是每 5 秒创建一次地图加载以更新标记位置。

这是一个 sample code，我每 5 秒使用 setPosition 更改标记位置。

下面是代码分解：

这是我设置标记初始位置的地方

 marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Hello World!'
    });

这是我的坐标的数组，我的标记应将位置更改为：

    markerList = [
        [-33.950198, 151.259302],
        [-33.923036, 151.259052],
        [-34.028249, 151.157507],
        [-33.80010128657071, 151.28747820854187]
    ];

然后我使用 for 循环 遍历数组中的所有坐标。然后把 setTimeout 放在改变标记位置时的 5 秒间隔：

for (var i = 0; i < markerList.length; i++) {
        (function(index) {
            setTimeout(function() {
                marker.setPosition(new google.maps.LatLng(markerList[index][0], markerList[index][1]));
            }, i * 5000);
        })(i);
    }

希望这会有所帮助！

【讨论】：