google-maps - 清理谷歌地图折线
问题描述
渲染其他折线后,我正在尝试清理谷歌地图折线。它适用于标记,但适用于它们留下的折线。我检查了 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);
}
感谢您的帮助。
解决方案
我解决了它,我不知道为什么它以前不起作用,但它现在起作用了。
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);
}
推荐阅读
- python - FileNotFoundError:6 个泄漏的信号量对象在关机时清理
- c++ - 嵌套 for 循环和 Verlet 列表优化 C++
- java - 如何使用 OBD2 从 Ioniq EV 获取 BMS 数据?
- go - goLang 中的 UDP 数据包创建
- python - 尝试使用 Selenium 访问下拉菜单时出现“webelement 对象不可迭代”
- go - How to configure go mod to have a require version based on environment variable?
- php - PHP Detect Litespeed
- python - 如何在不构建或安装的情况下直接使用 SciPy 源代码?
- r - R中的模式匹配字符向量
- javascript - Prism.js 部分工作!颜色更改但没有突出显示代码