谷歌地图api删除叠加层
大家在做google map api v2常用到的消除地图上所有叠加层的方法：clearOverlays()，当做google map api v3的时候，就是v3没有了v2中常用到的消除地图上所有叠加层的方法：clearOverlays()，本人做了一个清除地图叠加层的例子，希望对大家有帮助
<title>google map 清除叠加层</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
async defer></script>
<script type="text/javascript">
var map;
var rectangleRange = null;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE
]
},
});
document.getElementById("delMarker").style.display = "block";
map.controls[google.maps.ControlPosition.TOP_CENTER].push(delMarker);
drawingManager.setMap(map);
drawingManager.addListener('rectanglecomplete', zoomIn);//绘图后执行zoomIn()
}
function zoomIn(e, overlay) {
//删除上一个叠加层
if (rectangleRange != null) {
rectangleRange.setMap(null);
}
rectangleRange = e;
}
function clearOverlays() {
rectangleRange.setMap(null);
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="width: 100%; height: 100%"> </div>
<input type="button" id="delMarker" onclick="clearOverlays();" value="清除" />
</body>
</html>
<title>google map 清除叠加层</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete"
async defer></script>
<script type="text/javascript">
var map;
var rectangleRange = null;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE
]
},
});
document.getElementById("delMarker").style.display = "block";
map.controls[google.maps.ControlPosition.TOP_CENTER].push(delMarker);
drawingManager.setMap(map);
drawingManager.addListener('rectanglecomplete', zoomIn);//绘图后执行zoomIn()
}
function zoomIn(e, overlay) {
//删除上一个叠加层
if (rectangleRange != null) {
rectangleRange.setMap(null);
}
rectangleRange = e;
}
function clearOverlays() {
rectangleRange.setMap(null);
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="width: 100%; height: 100%"> </div>
<input type="button" id="delMarker" onclick="clearOverlays();" value="清除" />
</body>
</html>