从Google地图中删除圆圈

我使用的是<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吗?

您必须将圆圈存储到某个地方并使用函数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>

看起来<GoogleMapReact>的想法是使用react组件逻辑。因此，主要结构看起来像这样:

<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,输出如果你去掉AnyReactComponent，它就没了。也许这对你有帮助。

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

以下面的代码片段为例:

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>

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

相关内容

最新更新

热门标签：