@ react-google-maps / api载入数千个markers和markerClusterer时非常慢

问题描述

如何正确加载标记？因为当我从API加载123.xxx周围的数千个标记时，它降低了我的浏览器的速度，所有标记均已成功加载，但性能确实很慢。

我正在使用此软件包：https://www.npmjs.com/package/@react-google-maps/api

这是我使用SWR获取数据的方式，我做了一个自定义钩子：

export default function useMaps(){
const { data } = useSWR( "https://myapi.com/map-data");
let coordinates = [];
const data_spread = data !== undefined && data.message.message;
coordinates.push({
        lat: cekLat(lat_data,lng_data),lng: cekLong(lat_data,data,});
 })

 return{
   coordinates
 }

在我的map.jsx

export default function Map(){
 const {coordinates} = useMaps();
 return (
           <GoogleMap
              mapContainerStyle={gmap_container}
              zoom={gmap_props.zoom}
              center={gmap_props.center}
              options={gmap_options}
              onLoad={onMapLoad}
              onClick={onMapClick}
            >
              <MarkerClusterer>
                {(clusterer) =>
                  coordinates.map((item,idx) => (
                     <Marker
                          key={idx}
                          clusterer={clusterer}
                          position={{
                            lat: coordinate.lat,lng: coordinate.lng,}}
                          icon={{
                            url: "town.png",scaledSize: new window.google.maps.Size(35,55),origin: new window.google.maps.Point(0,0),anchor: new window.google.maps.Point(15,15),}}
                       >
                  )) 
                }
              </MarkerClusterer>
            </GoogleMap>
 )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）