优化标记为 react-google-maps

Question

我目前正在使用 react-google-maps 开发 GoogleMap 页面。
我的代码如下

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>
        );
    }
}

但不幸的是，它很慢，有时会停止....
我认为的原因是 api 结果的结果数量。
ajaxCall 在 getPlaces 函数中 return 100 ~ 2000 行。

是的...如果 ajax return 超过 500 行，它可能会很慢或停止。
但我必须展示所有的结果。

那么我该如何优化这个class？
真的不知道怎么办...

这是示例结果。我每次都必须这样显示。
请帮我！！

Answer 1

我建议将此代码移出渲染

                <MarkerClusterer onClick={this.openMultiWindow}>
                    {this.state.places.map((i) => (
                        <Marker key={i.id} position={{ lat : i.lat, lng : i.lng}} onClick={this.openWindow}/>
                    ))}
                </MarkerClusterer>

然后创建一个 returns null 的组件，直到您完成 ajax 结果集的循环。因此，所有标记都会有 1 个渲染，而不是每个添加的标记都有 1 个渲染。

还有一个未解决的问题符合您的情况。

动态添加许多标记的性能问题#495

https://github.com/tomchentw/react-google-maps/issues/495

优化标记为 react-google-maps

optimize to mark with react-google-maps

google-maps

google-maps-markers

markerclusterer

reactjs