从谷歌地图中删除圈子反应答案

【问题标题】：remove circles from google map react从谷歌地图中删除圈子反应
【发布时间】：2021-08-14 12:49:59
【问题描述】：

我正在使用<GoogleMapReact> 项目，在我在地图上渲染的东西中，有一个叫做geoFences 的圆圈。

问题是我有时想改变圆圈，但不是改变它们，而是地图将它们呈现在彼此之上。

    function renderGeoFences(map, maps) {
        const geoFencesSites = settings.geoFenceSites.filter((site) => !site.deleted);
        _.map(geoFencesSites, (site) => {
            let circle = new maps.Circle({
                strokeColor: tag.id!=='all-jobs' ? "orange":'#1aba8b26',
                strokeOpacity: 1,
                strokeWeight: 4,
                fillColor: '#1aba8b1f',
                fillOpacity: 1,
                map,
                center: { lat: Number(site.location.latitude), lng: Number(site.location.longitude) },
                radius: site.fenceSize,
            });
        });
    }

每次更改标签（状态）的值时都会调用此函数。它们不是像函数显示的那样仅仅改变描边颜色，而是在彼此之上渲染，您可以通过填充颜色来判断哪个应该具有不透明度，但它变得越来越暗。

我尝试使用此处的说明删除它https://developers.google.com/maps/documentation/javascript/shapes#maps_circle_simple-typescript 但它没有用。

在这次尝试中，我创建了一个列表，而不是一次只推送一个，最后按名为showJobsLocations 的状态。好像第一次运行，当状态为true时，圆圈不会渲染，这很好，但是在第二次运行时，他们会这样做，然后越来越暗，这意味着他们不会渲染如果我不想要它们，但一旦它们被删除，它们就不会被删除。

    function renderGeoFences(map, maps) {
    const geoFencesSites = punchClockStore.settings.geoFenceSites.filter((site) => !site.deleted);
    const circles = []
      _.map(geoFencesSites, (site) => {
        circles.push(new maps.Circle({
          strokeColor: '#1aba8b26',
          strokeOpacity: 1,
          strokeWeight: 4,
          fillColor: '#1aba8b1f',
          fillOpacity: 1,
          map,
          center: {lat: Number(site.location.latitude), lng: Number(site.location.longitude)},
          radius: site.fenceSize,
        }));
        if (showJobsLocations){
          // circle.setMap(null)
          if (circles.length) circles.map((circle) => circle.setMap(null));
        }
      });
  }

有人知道如何从<GoogleMapReact> 中删除Circles 吗？

【问题讨论】：

标签： javascript reactjs google-maps google-maps-react

【解决方案1】：

您必须将 Circle 存储到某个地方并使用函数 setMap(null) 在此处查看文档：https://developers.google.com/maps/documentation/javascript/shapes#circles

这里是更改圆圈颜色的示例（在全屏模式下运行）

var citymap = {
  chicago: {
    center: {
      lat: 41.878,
      lng: -87.629
    },
    fillColor: "#FF0000",
    population: 2714856,
  },
};


function replaceColorChicago(){
    citymap.chicago.cityCircle.setMap(null);
    citymap.chicago.cityCircle = null;
    citymap.chicago.fillColor = "blue";
    citymap.chicago.cityCircle = new google.maps.Circle({
       strokeColor: citymap.chicago.fillColor,
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: citymap.chicago.fillColor,
       fillOpacity: 0.35,
       map: window.map,
       center: citymap.chicago.center,
       radius: Math.sqrt(citymap.chicago.population) * 100,
    });
}

function initMap() {
  // Create the map.
  window.map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: {
      lat: 37.09,
      lng: -95.712
    },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    citymap[city].cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: citymap[city].fillColor,
      fillOpacity: 0.35,
      map: window.map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 200px;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Circles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <button onclick="replaceColorChicago();">Replace Chicago Color</button>
    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

【讨论】：

遗憾的是，这是我尝试过的示例，但没有成功。我猜是因为 thsi 代码与一起使用，而我使用
您必须将示例转换为 React 这里的 JSFiddle jsfiddle.net/p0v9fbws/9
我又试了，加了个例子，可惜没用，圈子淹死后，下次就删不掉了。
我的示例正在更改圆圈颜色。

【解决方案2】：

看起来<GoogleMapReact> 的想法是它使用了反应组件逻辑。因此主要结构如下所示：

<GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}>

    <AnyReactComponent 
      lat={59.955413} 
      lng={30.337844} 
      text={'Im in the Map and visible'} />
  
  </GoogleMapReact>

要从地图中删除一个项目，您必须从GoogleMapReact 组件中删除该组件。

示例：https://jsbin.com/xaderugare/edit?js,output 如果您删除AnyReactComponent，它就消失了。也许这可以帮助你。

【讨论】：

感谢您的反馈。我确实使用这种方法来渲染地图上的其他组件。但是您只能渲染静态组件，例如您的示例（无论地图的缩放如何，它都将保持相同的大小）来渲染它不起作用的动态组件（例如，设置了其半径的以米为单位，如果地图放大，我们希望它能够增长）
是否有机会将<Animated> 组件插入<GoogleMapReact> 对象，该对象会根据滚动级别更改其大小？

【解决方案3】：

如果您在 Google 地图上动态呈现圆圈，您可以做的一件事是将数据保存到一个状态中。我正在使用“@react-google-maps/api”包。

以这段代码sn-p为例：

import { GoogleMap, LoadScript, Circle } from '@react-google-maps/api'

const [geoFences, setGeoFences] = useState([])
const [showCircles, setShowCircles] = useState(true)

<LoadScript googleMapsApiKey={YOUR_GOOGLE_API_KEY}>
 <GoogleMap {...config}>
  {showCircles && geoFences.map((fence, index) => (
    <Circle 
       key={index} 
       center={{lat: fence.lat, lng: fence.lng}} 
       options={options} 
       radius={()=>getRadiusFromZoomLevel(zoom)}
      />
    )
  )}
 </GoogleMap>
</LoadScript>

如果您想要基于缩放级别的不同半径，您可以通过获取当前谷歌地图缩放级别并计算自定义半径来定义自己的函数。当您尝试删除地图上的圆圈时，只需将 showCircle 设置为 false。

【讨论】：