谷歌地图api删除叠加层

最新推荐文章于 2019-07-04 11:18:36 发布

胆小鬼345X

最新推荐文章于 2019-07-04 11:18:36 发布

阅读量776

点赞数

分类专栏： js 文章标签： google map

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

大家在做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 οnlοad="initMap()">
<div id="map" style="width: 100%; height: 100%"> </div>
<input type="button" id="delMarker" οnclick="clearOverlays();" value="清除" />
</body>
</html>