在标记移动时创建新的折线答案

【问题标题】：Create new polyline on marker movement在标记移动时创建新的折线
【发布时间】：2022-01-18 14:37:36
【问题描述】：

以下是我的送货员跟踪代码。我在 Ionic-angular 食品配送应用程序中使用 Maps Javascript API v3。我需要用户实时查看送货员的位置。我已经成功地绘制了一条折线，放置了送货员、用户和餐厅标记。送货员标记正在移动位置更改。但是每次送货员移动时我都需要重新绘制折线。怎么做？点击链接查看完整代码

https://pastebin.com/We8BQd7H

 directionsDisplay.setMap(map);
// directionsDisplay.setOptions({ suppressMarkers: true });
directionsDisplay.setOptions({
  polylineOptions: {
    strokeWeight: 4,
    strokeOpacity: 1,
    strokeColor: "#000000",
  },
  suppressMarkers: true,
});
var geocoder = new google.maps.Geocoder();

var service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
  {
    origins: [origin1],
    destinations: [destinationA],
    travelMode: "DRIVING",
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false,
  },
  function (response, status) {
    console.log('distance matrix response', response);
    if (status !== "OK") {
      alert("Error was: " + status);
    } else {
      var originList = response.originAddresses;
      var destinationList = response.destinationAddresses;
      var outputDiv = document.getElementById("output");
      // outputDiv.innerHTML = '';
      // deleteMarkers(markersArray);

      var showGeocodedAddressOnMap = function (asDestination) {
        var icon = asDestination ? destinationIcon : originIcon;
        return function (results, status) {
          if (status === "OK") {
            map.fitBounds(bounds.extend(results[0].geometry.location));
            // markersArray.push(new google.maps.Marker({
            //   map: map,
            //   position: results[0].geometry.location,
            //   icon: icon
            // }));
          } else {
            alert("Geocode was not successful due to: " + status);
          }
        };
      };

      directionsService.route(
        {
          origin: origin1,
          destination: destinationA,
          travelMode: "DRIVING",
        },
        function (response, status) {
          console.log('direction response', response);
          if (status === "OK") {
            directionsDisplay.setDirections(response);
          } else {
            window.alert("Directions request failed due to " + status);
          }
        }
      );

      for (var i = 0; i < originList.length; i++) {
        var results = response.rows[i].elements;
        geocoder.geocode(
          { address: originList[i] },
          showGeocodedAddressOnMap(false)
        );
        for (var j = 0; j < results.length; j++) {
          geocoder.geocode(
            { address: destinationList[j] },
            showGeocodedAddressOnMap(true)
          );
        }
      }
    }
  }

【问题讨论】：

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

【解决方案1】：

根据documentation 如果你想重绘你的折线，将它存储在一个变量中并使用setmap(null) 方法。你可以编写一个更新函数来删除你的旧折线，更新他的路径，然后重新绘制它。代码可能如下所示：

let map;
let directionsDisplay;
// assuming you have almost the first two point of the line to draw it
let pathCoordinate = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
];
let polylineShape = {
    strokeWeight: 4,
    strokeOpacity: 1,
    strokeColor: "#000000",
}

function initMap() {
   map = new google.maps.Map(document.getElementById("map"), {
       //... you're configuration
   });
}

function updatePath(newCoordinate) {
    // remove old polyline
    directionsDisplay.setMap(null);
    // update coordinate
    pathCoordinate.push(newCoordinate);
    // set the new polyline
    directionsDisplay = new google.maps.Polyline({...polylineShape, ...{path:pathCoordinate});
    directionsDisplay.setMap(map);
}

//
initmap();
directionsDisplay = new google.maps.Polyline({...polylineShape, ...{path:pathCoordinate});
directionsDisplay.setMap(map);
// then call updatePath() every time you need to update 
updatePath({ lat: -18.142, lng: 178.431 });

【讨论】：