谷歌地图突出显示路径中拖动的路径

Question

我正在使用 react js 来实现这个地图。默认情况下，我将在 Google 地图中设置一条红色路线。在同一条路线中，我需要突出显示一些将以黑色突出显示的特定路径，如下所示：

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

注意： 默认路由路径起点和终点在同一点，起点用标志图标表示。 起点和终点将不相同。他们将根据用户的反应而改变。

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;

我的示例回复：

export const routeMapped = {
  route: {
    routeId: "5a278bbfc9e77c0001cdf76d",
    athleteId: "59d62dc0c9e77c0001ee60f5",
    name: "Sathya new route",
    city:
      "105, Pasumpon Muthuramalinga Thevar Rd, RA Puram, Austin Nagar, Alwarpet, Chennai, Tamil Nadu 600028, India",
    postalCode: "600028",
    footPath: "FOLLOW",
    routeType: "MAP",
    routeCoordinates: [
      {
        lat: "13.02757",
        lng: "80.25241000000001",
        dis: 0,
        ele: 11.04315
      },
      {
        lat: "13.027460000000001",
        lng: "80.25280000000001",
        dis: 0.03,
        ele: 11.61113
      },
      {
        lat: "13.02724",
        lng: "80.25385",
        dis: 0.1,
        ele: 13
      },
      {
        lat: "13.027190000000001",
        lng: "80.25404",
        dis: 0.11,
        ele: 13
      },
      {
        lat: "13.02715",
        lng: "80.25410000000001",
        dis: 0.12,
        ele: 13
      },
      {
        lat: "13.02715",
        lng: "80.25423",
        dis: 0.13,
        ele: 13
      },
      {
        lat: "13.0271",
        lng: "80.25593",
        dis: 0.24,
        ele: 10.75041
      },
      {
        lat: "13.027090000000001",
        lng: "80.25710000000001",
        dis: 0.32,
        ele: 10.75639
      },
      {
        lat: "13.027070000000002",
        lng: "80.25792000000001",
        dis: 0.37,
        ele: 11.9969
      },
      {
        lat: "13.027080000000002",
        lng: "80.25885000000001",
        dis: 0.44,
        ele: 11.54305
      },
      {
        lat: "13.0271",
        lng: "80.25989000000001",
        dis: 0.51,
        ele: 7.42083
      },
      {
        lat: "13.02706",
        lng: "80.26016000000001",
        dis: 0.53,
        ele: 7.69134
      },
      {
        lat: "13.02697",
        lng: "80.26058",
        dis: 0.56,
        ele: 8.78328
      },
      {
        lat: "13.02683",
        lng: "80.26158000000001",
        dis: 0.62,
        ele: 10.39793
      },
      {
        lat: "13.02677",
        lng: "80.26199000000001",
        dis: 0.65,
        ele: 10.99504
      },
      {
        lat: "13.02663",
        lng: "80.26337000000001",
        dis: 0.75,
        ele: 10.00481
      },
      {
        lat: "13.02649",
        lng: "80.26448",
        dis: 0.82,
        ele: 9.75728
      },
      {
        lat: "13.02626",
        lng: "80.26591",
        dis: 0.92,
        ele: 7.33569
      },
      {
        lat: "13.025620000000002",
        lng: "80.26547000000001",
        dis: 0.97,
        ele: 8.88202
      },
      {
        lat: "13.025440000000001",
        lng: "80.26535000000001",
        dis: 0.99,
        ele: 9.03837
      },
      {
        lat: "13.02491",
        lng: "80.26495000000001",
        dis: 1.03,
        ele: 8.40581
      },
      {
        lat: "13.02424",
        lng: "80.26446",
        dis: 1.09,
        ele: 9
      },
      {
        lat: "13.024090000000001",
        lng: "80.26441000000001",
        dis: 1.1,
        ele: 9
      },
      {
        lat: "13.024030000000002",
        lng: "80.26439",
        dis: 1.1,
        ele: 9
      },
      {
        lat: "13.023560000000002",
        lng: "80.26417000000001",
        dis: 1.14,
        ele: 8.94518
      },
      {
        lat: "13.022110000000001",
        lng: "80.26336",
        dis: 1.25,
        ele: 7.18578
      },
      {
        lat: "13.02162",
        lng: "80.26315000000001",
        dis: 1.29,
        ele: 7.92565
      },
      {
        lat: "13.02148",
        lng: "80.26303",
        dis: 1.3,
        ele: 7.95145
      },
      {
        lat: "13.02078",
        lng: "80.26280000000001",
        dis: 1.35,
        ele: 7.69057
      },
      {
        lat: "13.020320000000002",
        lng: "80.26270000000001",
        dis: 1.39,
        ele: 7.16353
      },
      {
        lat: "13.02012",
        lng: "80.26257000000001",
        dis: 1.4,
        ele: 7.14811
      },
      {
        lat: "13.01997",
        lng: "80.26243000000001",
        dis: 1.42,
        ele: 7.25697
      },
      {
        lat: "13.01965",
        lng: "80.2621",
        dis: 1.45,
        ele: 7.20241
      },
      {
        lat: "13.01913",
        lng: "80.26159000000001",
        dis: 1.5,
        ele: 7.5177
      },
      {
        lat: "13.019020000000001",
        lng: "80.26153000000001",
        dis: 1.51,
        ele: 7.6779
      },
      {
        lat: "13.018910000000002",
        lng: "80.26142",
        dis: 1.52,
        ele: 7.83809
      },
      {
        lat: "13.0187",
        lng: "80.26121",
        dis: 1.54,
        ele: 8.12365
      },
      {
        lat: "13.0187",
        lng: "80.26088",
        dis: 1.56,
        ele: 8.05447
      },
      {
        lat: "13.01866",
        lng: "80.25992000000001",
        dis: 1.62,
        ele: 8.20218
      },
      {
        lat: "13.018630000000002",
        lng: "80.25916000000001",
        dis: 1.68,
        ele: 8.21478
      },
      {
        lat: "13.018640000000001",
        lng: "80.25892",
        dis: 1.69,
        ele: 8.12121
      },
      {
        lat: "13.01862",
        lng: "80.25861",
        dis: 1.71,
        ele: 8.0189
      },
      {
        lat: "13.01861",
        lng: "80.25818000000001",
        dis: 1.74,
        ele: 7.84774
      },
      {
        lat: "13.018650000000001",
        lng: "80.25779",
        dis: 1.77,
        ele: 7.78325
      },
      {
        lat: "13.018680000000002",
        lng: "80.25767",
        dis: 1.78,
        ele: 7.82694
      },
      {
        lat: "13.018730000000001",
        lng: "80.25754",
        dis: 1.79,
        ele: 7.89976
      },
      {
        lat: "13.01895",
        lng: "80.25705",
        dis: 1.82,
        ele: 8.44032
      },
      {
        lat: "13.019480000000001",
        lng: "80.25598000000001",
        dis: 1.9,
        ele: 9.23848
      },
      {
        lat: "13.019870000000001",
        lng: "80.25523000000001",
        dis: 1.96,
        ele: 9.76589
      },
      {
        lat: "13.02006",
        lng: "80.25477000000001",
        dis: 1.99,
        ele: 9.48015
      },
      {
        lat: "13.020320000000002",
        lng: "80.25369",
        dis: 2.07,
        ele: 8.90729
      },
      {
        lat: "13.020430000000001",
        lng: "80.25333",
        dis: 2.1,
        ele: 8.383
      },
      {
        lat: "13.02053",
        lng: "80.25319",
        dis: 2.11,
        ele: 8.17911
      },
      {
        lat: "13.020690000000002",
        lng: "80.2531",
        dis: 2.12,
        ele: 8.04804
      },
      {
        lat: "13.02091",
        lng: "80.25304000000001",
        dis: 2.14,
        ele: 7.95772
      },
      {
        lat: "13.02153",
        lng: "80.25297",
        dis: 2.18,
        ele: 7.72059
      },
      {
        lat: "13.021700000000001",
        lng: "80.25295000000001",
        dis: 2.19,
        ele: 7.7359
      },
      {
        lat: "13.02213",
        lng: "80.25287",
        dis: 2.22,
        ele: 7.91471
      },
      {
        lat: "13.024360000000001",
        lng: "80.25274",
        dis: 2.37,
        ele: 10
      },
      {
        lat: "13.02448",
        lng: "80.25274",
        dis: 2.38,
        ele: 10
      },
      {
        lat: "13.024630000000002",
        lng: "80.25276000000001",
        dis: 2.39,
        ele: 10
      },
      {
        lat: "13.025210000000001",
        lng: "80.25299000000001",
        dis: 2.44,
        ele: 10.37474
      },
      {
        lat: "13.02682",
        lng: "80.25375000000001",
        dis: 2.56,
        ele: 12.67804
      },
      {
        lat: "13.02715",
        lng: "80.25383000000001",
        dis: 2.58,
        ele: 13
      },
      {
        lat: "13.02724",
        lng: "80.25385",
        dis: 2.59,
        ele: 13
      },
      {
        lat: "13.027320000000001",
        lng: "80.25341",
        dis: 2.62,
        ele: 12.49951
      },
      {
        lat: "13.02753",
        lng: "80.25256",
        dis: 2.68,
        ele: 11.2616
      },
      {
        lat: "13.02757",
        lng: "80.25241000000001",
        dis: 2.69,
        ele: 11.04315
      }
    ],
    distance: 2.69,
    maxElevation: 0,
    minElevation: 0,
    startingLocation: {
      type: "ENTRY",
      coordinates: ["13.02757", "80.25241000000001"]
    },
    endingLocation: {
      type: "EXIT",
      coordinates: ["13.02757", "80.25241000000001"]
    },
    split: [
      {
        id: 1,
        splitNo: 1,
        splitDistance: 2.69,
        splitMarkers: {
          markerType: "ENTRY",
          markerId: "1",
          startPosLat: "13.02757",
          startPosLang: "80.25241000000001",
          endPosLat: "13.02757",
          endPosLang: "80.25241000000001"
        }
      }
    ],
    laps: 1,
    createdDatetime: null,
    updatedDatetime: null
  }
};

Answer 1

这对你有帮助吗？

Drawing on the Map 有一些能力 https://developers.google.com/maps/documentation/javascript/overlays

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

有一个板块Custom Overlays

https://developers.google.com/maps/documentation/javascript/customoverlays

哪个使用OverlayView

你可以在这里找到例子https://developers.google.com/maps/documentation/javascript/customoverlays

另外，还有第二种方法你可以试试Simple Polylineshttps://developers.google.com/maps/documentation/javascript/examples/polyline-simple

这是例子的一部分

<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>

Answer 2

    // 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 
  */