Question

渲染其他折线后，我正在尝试清理Google地图折线。它适用于标记，但适用于它们留下的折线。我检查了Google Maps API google maps api 并且无法使其正常工作。它看起来像我在顺序中做错了事，但是我尝试了很多方法，但找不到解决方法。

 function addMarkers(markerPosition: any, id?: number) {

    // Creating markers
    const position = { lat: markerPosition._latitude, lng: markerPosition._longitude };
    marker = map && new window.google.maps.Marker({
      map,
      position,
      id,
    });

    // Add listener to markers
    marker.addListener('click', () => {
      dispatch(getStop(id));
    });

    // Creating poliLine route
    pathToRender.push(position);

    // Focus on the markers
    loc = map && new window.google.maps.LatLng(marker.position.lat(), marker.position.lng());
    bounds.extend(loc);
    return markers.push(marker);
  }

  useEffect(() => {
    setStopInfo(stop.stop);
    // stop.stop.userName !== '' && setPopUp(stop.stop);
  }, [stop]);

  function setPolyLine(pathRout: any) {
    routePath = new window.google.maps.Polyline({
      path: pathToRender,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
    });
    routePath.setMap(pathRout);
  }

  function setMapOnAll(mapToRender: any) {
    for (let i = 0; i < markers.length; i += 1) {
      markers[i].setMap(mapToRender);
    }
    map.fitBounds(bounds);
    map.panToBounds(bounds);
  }

  function clearMarkers() {
    setMapOnAll(null);
    setPolyLine(null);
  }

  function markersAdministration(routeChoose: number) {
    const route = showRoutes[routeChoose];
    setMapConfig({ center: { lat: 40, lng: 10 }, zoom: 5, disableDefaultUI: false });

    // Clear Markers
    clearMarkers();
    markers = [];
    pathToRender = [];

    // Add stops, destination and origin to the markers
    addMarkers(route.origin.point);
    route.stops && route.stops.map((routeStop: IStops) => addMarkers(routeStop.point, routeStop.id));
    addMarkers(route.destination.point);

    // Setting up markers and lines layers
    setMapOnAll(map);
    setPolyLine(map);
  }

感谢您的帮助。

Answer 1

我已经解决了，我不知道为什么以前不起作用，但是现在可以起作用。

  function setMapOnAll(mapToRender: any) {
    // Create Markers
    for (let i = 0; i < markers.length; i += 1) {
      markers[i].setMap(mapToRender);
    }

    // Create Polyline
    routePath = new window.google.maps.Polyline({
      path: pathToRender,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
    });
    routePath.setMap(mapToRender);

    // Map focus on Bounds
    map.fitBounds(bounds);
    map.panToBounds(bounds);
  }

  function clearMarkers() {
    routePath && routePath.setMap(null);
    setMapOnAll(null);
  }

清洁谷歌地图折线

1 个答案: