干净的谷歌地图折线

Question

一旦我渲染其他折线，我就会尝试清理谷歌地图折线。它适用于标记，但适用于它们保留的折线。我检查谷歌地图 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);
}