Javascript 谷歌地图高亮显示路线中拖动的路径

我使用react js实现这个映射。默认情况下，我在谷歌地图上有一条路线将被涂成红色。在同一路线中，我需要突出显示一些特定路径，这些路径将以黑色突出显示，如下所示：

在图像的右侧，将有一个钢笔图标。当我点击图标时，我只需要突出显示红线上的特定路径。如图所示，高亮显示路径将为黑色。然后我需要根据默认路径计算高亮显示路径的距离

注意： 默认路由路径在同一点开始和结束，起点用标志图标指示。 起点和终点一次不会相同。它们将根据用户的响应进行更改

class MappedRoutes extends React.Component {
  constructor(props) {
    super(props);

    this.drawFreeHand = this.drawFreeHand.bind(this);
  }
  componentDidMount() {
    const routeCoordinatesArr = [];
    map(routeMapped.route.routeCoordinates, el => {
      routeCoordinatesArr.push({
        lat: parseFloat(el.lat),
        lng: parseFloat(el.lng)
      });
    });
    this.mapLocation(routeCoordinatesArr);
  }

  mapLocation(routecoordinates) {
    let currentMarker;
let snapToRoute;
this.map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: routecoordinates[0].lat, lng: routecoordinates[0].lng },
  minZoom: 3,
  zoom: 14,
  disableDoubleClickZoom: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
});

// Google map direction service for draw routes
const flightPath = new google.maps.Polyline({
  path: routecoordinates,
  geodisc: true,
  avoidTolls: true,
  strokeColor: '#db3eb1',
  strokeOpacity: 1,
  strokeWeight: 3,
});

flightPath.setMap(this.map);

google.maps.event.addDomListener(flightPath, 'click', evt => {
  currentMarker = new google.maps.Marker({
    position: evt.latLng,
    map: this.map,
    draggable: true,
    icon: iconPencile,
  });
  const snapToRoute = new SnapToRoute(this.map, currentMarker, flightPath);
  this.drawFreeHand(currentMarker);
});
  }


    drawFreeHand(marker) {
    const { highlightValue } = this.props;
    const path = new google.maps.MVCArray();
    const service = new google.maps.DirectionsService();
    const polyline = new google.maps.Polyline({
      map: this.map,
      fillColor: '#ffd83c',
      fillOpacity: 0.8,
      strokeColor: '#ffd83c',
      strokeOpacity: 0.8,
      strokeWeight: 5,
      clickable: false,
      editable: false,
    });
    google.maps.event.addListener(marker, 'drag', event => {
      if (path.getLength() === 0) {
        path.push(event.latLng);
        polyline.setPath(path);
      } else {
        service.route(
          {
            origin: path.getAt(path.getLength() - 1),
            destination: event.latLng,
            travelMode: google.maps.DirectionsTravelMode.WALKING,
          },
          (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
              for (let i = 0, len = result.routes[0].overview_path.length; i < len; i += 1) {
                path.push(result.routes[0].overview_path[i]);
              }
            }
          }
        );
      }
    });
  }
  render() {
    return (
      <div>
        <div onClick={this.drawFreeHand}>click to highlight</div>
        <div id="map" style={{ height: "500px" }} />
      </div>
    );
  }
}
export default MappedRoutes;

这对你有帮助吗

有一些在地图上绘图的能力

也许这个行动会对你有所帮助

有一个部分

自定义覆盖

它正在使用

OverlayView

你可以在这里找到这些例子

此外，还有第二种方法可以尝试

简单多段线

下面是示例的一部分

<script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        var flightPlanCoordinates = [
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }
    </script>

//此示例创建一条2像素宽的红色多段线，显示
//加利福尼亚州奥克兰和布里斯班之间的第一次跨太平洋航班，
//澳大利亚，由查尔斯·金斯福德·史密斯制作。
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心：{lat:0，lng:-180}，
mapTypeId:'地形'
});
var FlightPlan坐标=[
{lat:37.772，lng:-122.214}，
{lat:21.291，lng:-157.821}，
{拉丁美洲：-18.142，液化天然气：178.431}，
{拉丁美洲：-27.467，液化天然气：153.027}
];
var flightPath=new google.maps.Polyline({
路径：FlightPlan坐标，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
flightPath.setMap（map）；
}

不应使用光标坐标创建新路径，而应使用原始路径坐标创建新路径。

drawFreeHand

函数的作用是什么？我在中看到的每个问题/答案都是绘制“自由手”多段线（或多边形）。在我看来，您希望将鼠标位置“捕捉”到“路线多段线”，然后将路线多段线与另一条路线多段线重叠（从起点到捕捉点）。@geocodezip

drawFreeHand

是一个单击功能，当我触发时，我只能高亮显示路线，我可以突出显示我想要的路线，这张图片在你的问题中。您是否表示红线来自

drawFreehand

功能？您的问题表明这是“图标点击事件”。也许您可以更好地描述您的问题，很难从当前编写的问题中分辨出您的问题是什么以及您的用例/问题是什么。@geocodezip红线表示突出显示的距离工具提示，

drawFreehand

是一个单击功能，当我单击它时，我只能在默认多段线管线上绘制黄线。

<script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        var flightPlanCoordinates = [
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }
    </script>

    // You need to have a polyline, 

    var poly = new google.maps.Polyline({
      map: _map,
      strokeColor: '#000',
      strokeWeight: 2,
      strokeOpacity: 0.8,
      clickable: false
    });

    // Then you have to add a listener, This will add points to polyline as you drag cursor

    var move = google.maps.event.addListener(_map, 'mousemove', function (e) {
      poly.getPath().push(e.latLng);
    });

    // on mouseup add this,
    google.maps.event.addListenerOnce(_map, 'mouseup', function (e) {
      google.maps.event.removeListener(move);
      var path = poly.getPath();
      poly.setMap(null);
      var polygon = new google.maps.Polygon({
        map: _map,
        path: path,
        strokeColor: '#000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#000',
        fillOpacity: 0
      });
    });              



  /* 
    Note:
    During dragging, you must temporarily make the map non draggable. This can be done 
    by setting draggable as false 
  */