[英]optimize to mark with react-google-maps
I'm currently develop GoogleMap page with react-google-maps
. 我目前正在使用
react-google-maps
开发GoogleMap页面。
My code like following 我的代码如下
class GoogleMapBox extends React.Component{
state = {
center : this.props.center,
places : []
}
mapMounted = ((ref) => {
this.map = ref;
})
getPlaces = (() => {
const center = this.map.getCenter();
if(this.map.getZoom() >= 15){
const bounds = this.map.getBounds();
const minLatLng = bounds.getSouthWest();
const maxLatLng = bounds.getNorthEast();
ajaxCall(/*apiUrl*/, {
/*param*/
minLat : minLatLng.lat(),
minLng : minLatLng.lng(),
maxLat : maxLatLng.lat(),
maxLng : maxLatLng.lng(),
})
.then((result) => {
this.setState({
center,
places : result.list
})
});
} else {
this.setState({
center,
places : []
})
}
})
render(){
return (
<GoogleMap
ref={this.mapMounted}
center={this.state.center}
zoom={15}
options={{
minZoom : 6,
maxZoom : 18
}}
onTilesLoaded={this.getPlaces}
>
<MarkerClusterer onClick={this.openMultiWindow}>
{this.state.places.map((i) => (
<Marker key={i.id} position={{ lat : i.lat, lng : i.lng}} onClick={this.openWindow}/>
))}
</MarkerClusterer>
</GoogleMap>
);
}
}
But unfortunately, It is very slow and sometimes it stop.... 但不幸的是,它非常慢,有时会停止...。
The reason I think is result quantity of api result. 我认为原因是api结果的结果数量。
ajaxCall
in getPlaces
function return 100 ~ 2000 rows. ajaxCall
函数中的getPlaces
返回getPlaces
行。
yeah... if ajax returns more than 500 rows, it might be very slow or stop. 是的...如果ajax返回的行数超过500,可能会非常缓慢或停止。
But I have to show all of the result. 但是我必须展示所有结果。
So how can I optimize this class? 那么,如何优化此类?
I really don't know how to do... 我真的不知道该怎么办...
This is sample result.. I have to show like this every time. 这是示例结果。我必须每次都这样显示。
Please help me !! 请帮我 !!
I would suggest moving this code outside the render 我建议将这段代码移出渲染器
<MarkerClusterer onClick={this.openMultiWindow}>
{this.state.places.map((i) => (
<Marker key={i.id} position={{ lat : i.lat, lng : i.lng}} onClick={this.openWindow}/>
))}
</MarkerClusterer>
Then create a component that returns null till you have finished looping the ajax resultset. 然后创建一个返回null的组件,直到完成循环ajax结果集为止。 So there will be 1 render for all the markers instead of 1 render for each marker added.
因此,所有标记将有1个渲染,而不是每个添加的标记有1个渲染。
There is also an open issue that matches your scenario. 还有一个与您的情况相符的未解决问题。
Performance issue dynamically adding many markers #495 动态添加许多标记的性能问题#495
https://github.com/tomchentw/react-google-maps/issues/495 https://github.com/tomchentw/react-google-maps/issues/495
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.