如何解决@ 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 举报,一经查实,本站将立刻删除。