如何在谷歌地图添加新圆圈之前自动删除以前的圆圈

Question

我想在添加新圆圈之前删除第一个圆圈，然后单击Google地图的标记。

我正在使用谷歌地图API： https://developers.google.com/maps/solutions/store-locator/clothing-store-locator

网站链接： http://premium-gates.com/bft/dealers/

搜索测试文本：5427DG

这是在标记上添加圆圈的代码。

function createMarker(latlng, name, address) {
var image = '<?php echo get_template_directory_uri() ?>/assets/images/map-pin.png';
var html = "<div class='map-popup'><b>" + name + "</b> <p>" + address + "</p></div>";
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: image
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
marker.addListener('click', function(event) {
addCircle(event.latLng);
});
markers.push(marker);
}
function addCircle(location) {
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 0.2,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map,
center: location,
radius: 1000,
draggable:false
});
}

单击标记时，如何在添加新圆圈之前删除圆圈？

Answer 1

相关问题：

• 如何从地图中删除带有绑定圆圈的标记？
• 从 Google 地图中移除圆形对象

如果您只需要一个圆，请在创建新圆之前保留对它的引用并将其删除(如果存在(。 添加这个：

if (cityCircle && cityCircle.setMap) 
cityCircle.setMap(null);

对于addCircle功能：

var cityCircle;
function addCircle(location) {
if (cityCircle && cityCircle.setMap)
cityCircle.setMap(null);
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 0.2,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map,
center: location,
radius: 1000,
draggable: false
});
}

概念验证小提琴

代码片段：

var markers = [];
var map;
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: -33.9,
lng: 151.2
}
});
infoWindow = new google.maps.InfoWindow();
setMarkers(map);
}
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map) {
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
createMarker({
lat: beach[1],
lng: beach[2]
}, beach[0], beach[0]);
}
}
function createMarker(latlng, name, address) {
var html = "<div class='map-popup'><b>" + name + "</b> <p>" + address + "</p></div>";
var marker = new google.maps.Marker({
map: map,
position: latlng,
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
marker.addListener('click', function(event) {
addCircle(event.latLng);
});
markers.push(marker);
}
var cityCircle;
function addCircle(location) {
if (cityCircle && cityCircle.setMap)
cityCircle.setMap(null);
cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 0.2,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map,
center: location,
radius: 1000,
draggable: false
});
}

/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>