谷歌地图:删除所有圆圈
Google Map: Remove all Circles
我正在寻找一个javascript函数,将清除所有图纸从我的地图;例如map.removeMarkers()
或map.removeOverlays()
,但用于形状-特别是圆形。
我已经看到了一些关于如何在Android上做到这一点的答案,但我正在寻找一个web解决方案。我用gmaps.js来画圆圈:
// create circle loop
for( i = 0; i < data.mapArray.length; i++ ) {
circle = map.drawCircle({
lat: data.mapArray[i].lat,
lng: data.mapArray[i].lng,
radius: parseInt(data.mapArray[i].radius),
strokeColor: '#'+data.mapArray[i].color,
strokeWeight: 8,
fillOpacity: 0,
click: (function (e) {
return function () {
$('#'+modalType).modal({
remote: modalURL+e
});
};
})(data.mapArray[i].id)
});
} // end loop
我猜在这个循环中,我需要将圆圈添加到数组中,然后调用一个函数来清除所有圆圈,但我不确定如何执行
一个简单的解决方案是将对象存储在数组
<input type="button" value="Clear all" onclick="removeAllcircles()"/>
<script>
var circles = [];
// create circle loop
for( i = 0; i < data.mapArray.length; i++ ) {
var circle = map.drawCircle({
lat: data.mapArray[i].lat,
lng: data.mapArray[i].lng,
radius: parseInt(data.mapArray[i].radius),
strokeColor: '#'+data.mapArray[i].color,
strokeWeight: 8,
fillOpacity: 0,
click: (function (e) {
return function () {
$('#'+modalType).modal({
remote: modalURL+e
});
};
})(data.mapArray[i].id)
});
// push the circle object to the array
circles.push(circle);
} // end loop
// remove All circles
function removeAllcircles() {
for(var i in circles) {
circles[i].setMap(null);
}
circles = []; // this is if you really want to remove them, so you reset the variable.
}
</script>
编辑一旦你有了这个数组,你就可以使用它来切换开/关,或者针对一些特定的圆,比如圆圈[17]…
<input type="button" value="Toggle on" onclick="toggleOn()"/>
<input type="button" value="Toggle off" onclick="toggleOff()"/>
<script>
// Toggle off
function toggleOff() {
for(var i in circles) {
circles[i].setMap(null);
}
}
// Toggle on
function toggleOn() {
for(var i in circles) {
circles[i].setMap(map);
}
}
</script>
觉得这段代码更简单一点。
var circles = [];
// create circle loop
for( i = 0; i < data.mapArray.length; i++ ) {
circle = map.drawCircle({
lat: data.mapArray[i].lat,
lng: data.mapArray[i].lng,
radius: parseInt(data.mapArray[i].radius),
strokeColor: '#'+data.mapArray[i].color,
strokeWeight: 8,
fillOpacity: 0,
click: (function (e) {
return function () {
$('#'+modalType).modal({
remote: modalURL+e
});
};
})(data.mapArray[i].id)
});
circles.push(circle);
} // end loop
当需要删除时,只需执行…
circles.forEach((circle) => {
circle.setMap(null);
});
circles = [];
相关文章:
- 删除特定的谷歌地图标记
- 删除谷歌地图热图的光晕效果
- 删除谷歌地图地点服务中的标记
- 用于删除谷歌地图标记的反向动画
- 如何删除谷歌地图中的特定多边形添加事件监听器右键单击
- 动态删除谷歌地图中的特定标记
- 刷新/删除谷歌地图API上的标记
- 按标签删除谷歌地图标记
- 可以从元素中删除谷歌地图吗?
- 通过下拉选择删除谷歌地图标记
- 如何获得id时点击并删除?谷歌地图V3
- 删除谷歌地图自定义标记上的鼠标
- 我怎样才能完全删除谷歌地图弹出气球
- 加入搜索框&删除谷歌地图API Javascript中的标记
- 删除谷歌地图圆圈/形状
- 删除谷歌地图中绘制的多边形
- 无法删除谷歌地图中的事件侦听器
- 如何删除谷歌地图公司信息
- 删除谷歌地图的DataLayer顶点
- 不能删除谷歌地图标记