时间戳

首页 > 解决方案 > 从谷歌地图中删除圈子反应

javascript - 从谷歌地图中删除圈子反应

问题描述

我正在使用<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));
        }
      });
  }

任何人都知道如何从中Circles删除<GoogleMapReact>？

标签： javascriptreactjsgoogle-mapsgoogle-maps-react

解决方案

您必须将 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>

推荐阅读