反应谷歌地图标记删除答案

【问题标题】：React Google Maps Markers deletion反应谷歌地图标记删除
【发布时间】：2019-05-10 01:58:28
【问题描述】：

谷歌地图标记

嗨，我从一个数组生成标记并在我单击它们时删除它们但那没有发生，数组更改不影响 oage。

这里是初始化数组的代码和删除标记的函数

    const [calls, setCalls] = useState([
            { lat: -31.56391, lng: 147.154312 },
            { lat: -33.718234, lng: 150.363181 },
            { lat: -33.727111, lng: 150.371124 },
            { lat: -33.848588, lng: 151.209834 },
            { lat: -33.851702, lng: 151.216968 },
            { lat: -34.671264, lng: 150.863657 },
            { lat: -35.304724, lng: 148.662905 },
            { lat: -36.817685, lng: 175.699196 },
            { lat: -36.828611, lng: 175.790222 },
            { lat: -37.75, lng: 145.116667 },
            { lat: -37.759859, lng: 145.128708 },
            { lat: -37.765015, lng: 145.133858 },
            { lat: -37.770104, lng: 145.143299 },
            { lat: -37.7737, lng: 145.145187 },
            { lat: -37.774785, lng: 145.137978 },
            { lat: -37.819616, lng: 144.968119 },
            { lat: -38.330766, lng: 144.695692 },
            { lat: -39.927193, lng: 175.053218 },
            { lat: -41.330162, lng: 174.865694 },
            { lat: -42.734358, lng: 147.439506 },
            { lat: -42.734358, lng: 147.501315 },
            { lat: -42.735258, lng: 147.438 },
            { lat: -43.999792, lng: 170.463352 }
        ]);
        const deleteMarkerPoint = (i, c) => {
            let newCalls = calls;
            newCalls.splice(i, 1);
            setCalls(newCalls);
            console.log(calls);
        };

这是在集群中生成地图和标记的 jsx

                           <LoadScript
                                id='script-loader'
                                googleMapsApiKey='AIzaSyAPLLzHwARFL3Nbw21l2kv6-Uz0yyy95Kk'
                            >
                                <GoogleMap
                                    id='map'
                                    mapContainerClassName='Map--Map'
                                    mapContainerStyle={{ height: "35vw", width: "50vw" }}
                                    zoom={zoom}
                                    center={center}
                                >
                                    <MarkerClusterer
                                        options={{
                                            imagePath:
                                                "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
                                        }}
                                    >
                                        {clusterer =>
                                            calls.map((location, i) => (
                                                <Marker
                                                    key={i}
                                                    position={location}
                                                    clusterer={clusterer}
                                                />
                                            ))
                                        }
                                    </MarkerClusterer>
                                </GoogleMap>
                            </LoadScript>

【问题讨论】：

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

【解决方案1】：

尝试不使用clusterer 对象。我认为没有它应该仍然可以工作。

<MarkerClusterer
  options={{
      imagePath:
          "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
  }}
>
{calls.map((location, i) => (
    <Marker
        key={i}
        position={location}
    />
  ))
}
</MarkerClusterer>

如果您必须使用它，您可能需要在返回新的之前致电clusterer.clearMarkers()。

您也可以尝试扩展数组，以便在更新状态时创建一个新对象let newCalls = [...calls];

【讨论】：