0

我有一个地图反应组件，我正在动态添加标记。问题是当我在商店中添加标记时，整个地图会重新呈现，而不是仅仅将标记附加到地图上。有没有人对如何解决这个问题有任何建议？我很确定我需要将商店专门注入 CPMap 功能，我只是不确定如何。

const CPMap = withGoogleMap((props) => (
        <GoogleMap
            ref={props.onMapLoad}
            style={{
                height: 100,
                width: 100,
            }}
            onCenterChanged={props.boundsChanged}
            defaultOptions={{ styles: this.mapStyles }}
            defaultZoom={props.zoom}
            defaultCenter={{ lat: props.center.lat, lng: props.center.lng }}>
            <MarkerClusterer
                gridSize={40}>
                {
                    props.markers.map(({ key, position }) => (
                        <Marker
                            key={key}
                            position={{ lat: position.lat, lng: position.lng }}
                            icon={{
                                url: require('../../images/marker.png')
                            }}
                        />
                    ))
                }
            </MarkerClusterer>
        </GoogleMap >
    ))

    return (
        <CPMap
            style={{
                height: 100,
                width: 100,
            }}
            onMapLoad={(gMap) => {
                map = gMap
                this.props.map.fetchMarkers()
            }}
            boundsChanged={() => {
                this.props.map.fetchMarkers()
            }}
            center={this.props.map.center}
            zoom={this.props.map.zoom}
            markers={mobx.toJS(this.props.map.markers)}
            containerElement={
                <div style={{ height: 'calc(100vh - 70px)' }
                } />
            }
            mapElement={
                <div style={{ height: 'calc(100vh - 70px)' }} />
            } />
    )
}
4

1 回答 1

0

我建议您以下解决方案：不要将 maker 直接传递给 CMap 组件，而是使用 store ；

const markersStore = observable({
    markers: []
});

然后在您的组件中 - 将 MarkersClusterer 移动到单独的组件并传递 markerStore 更深一层：

//import markersStore or inject via mobx-react package
class MyComponent extends Component {
   render() {
      const CMap = withGoogleMap((props) => (
         <GoogleMap
            ...
            <Clusterer markersStore={props.markersStore} />
         />
      ))
      return (
         <CMap
            ...
            markersStore={markersStore}
         />
      )
   }
}

使您的新集群组件可观察，以便在标记存储“标记”属性更新时更新；

@observable
class Clusterer extends Component {
    render(){
       const { markers } = this.props.markersStore;
       return (
          <MarkerClusterer>
              { markers.map(...)}
          </MarkerClusterer>
       )
    }
}

最后的更改是更新您的 fetchMarkers 方法，以便使用新数据填充markersStore。

使用此解决方案，CMap 组件对标记一无所知，并且在收到新数据时不会更新。同时 MarkersClusterer 组件变得更加聪明，并“观察”markersStore 中的变化。

于 2017-06-20T09:32:55.340 回答