如何从地图中删除前一个圆圈？答案

【问题标题】：how to remove previous circle from the map?如何从地图中删除前一个圆圈？
【发布时间】：2019-11-23 09:27:54
【问题描述】：

当我点击地图时，它会给出带有信息框和半径为 1000 米的圆圈的当前位置，但是当我点击地图的另一个位置时，标记会移动到另一个位置，但圆圈仍然保存在上一个位置位置。

这是我的代码，我需要帮助

 componentDidMount() {

    const googleMapScript = document.createElement('script');
    googleMapScript.src = 'https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places';
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener('load', () => {
      this.googleMap = this.createGoogleMap();
      this.marker = this.createMarker();

    });

  }
  createGoogleMap = () => {

    let map = new window.google.maps.Map((window.document.getElementById('google-map'), this.googleMapRef.current), {
      zoom: 10,
      center: {
        lat: 43.642567,
        lng: -79.387054
      },
      disableDefaultUI: true,

    });

    return map
  }

  createMarker = () => {

    let marker = new window.google.maps.Marker({
      position: { lat: 43.642567, lng: -79.387054 },
      map: this.googleMap,
    });
    let map = this.googleMap
    let circle;

    window.google.maps.event.addListener(this.googleMap, 'click', function(event) {
      marker.setPosition(event.latLng)
      let lng=marker.getPosition().lng();
      let lat=marker.getPosition().lat();
      let infowindow = new window.google.maps.InfoWindow;
      infowindow.setContent("Latitude: " + lat + "<br>" + "Longitude: " + lng);
      infowindow.open(this.map, marker);

      circle = new window.google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.5,
        map: map,
        center: marker.getPosition(),
        radius:1000
      });

    });

  }

【问题讨论】：

你能设置一个代码沙箱吗？
@blueseal 我是新人，它在 sadbox 错误中提供了更多信息

标签： javascript reactjs google-maps-api-3

【解决方案1】：

在创建新圆之前隐藏现有圆（如果存在）：

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

proof of concept fiddle

代码 sn-p：

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 11
  });

  let marker = new window.google.maps.Marker({
    position: {
      lat: 43.642567,
      lng: -79.387054
    },
    map: map,
  });
  map.setCenter(marker.getPosition());
  let circle;
  google.maps.event.addListener(map, 'click', function(event) {
    marker.setPosition(event.latLng)
    let lng = marker.getPosition().lng();
    let lat = marker.getPosition().lat();
    let infowindow = new window.google.maps.InfoWindow;
    infowindow.setContent("Latitude: " + lat + "<br>" + "Longitude: " + lng);
    infowindow.open(this.map, marker);
    if (circle && circle.setMap) circle.setMap(null);
    circle = new window.google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.5,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      map: map,
      center: marker.getPosition(),
      radius: 1000
    });

  });
}

/* 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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

【讨论】：