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

Posted 2023-02-19

【中文标题】在标记移动时创建新的折线

【英文标题】：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)
          );
        
      
    
  

【参考方案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 );