javascript - 如何在 Google map 中添加新圈子之前自动删除先前的圈子

Question

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

我正在使用谷歌地图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

相关问题:

• How can I remove marker with bonded circle from the map?
• Remove a circle object from a Google Map

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

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
  });
}

proof of concept fiddle

代码片段:

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>