2

我正在开发一个反应网络客户端应用程序，该应用程序侦听 gps 坐标的 json 数组并相应地更新地图上的标记（使用google-maps-react）。一切都按预期工作，但是，标记在移动时似乎会闪烁。我认为一个解决方案是减少更新频率并使用类似的东西：marker-animate来平滑标记位置更新。我对反应比较陌生，我不知道如何将标记动画与 google-maps-react 结合起来。

以下是我的应用程序更新标记的方式：

     var marker_data=JSON.parse(e.data);
     var markerIndex=null;
     for(var i=0; i<_this.state.markers.length; i++){
            if(_this.state.markers[i].id==marker_data.id){
                markerIndex=i;
                break;
            }
        }
        if(markerIndex!==null){
            var existingMarkers=_this.state.markers;
            existingMarkers[markerIndex]=marker_data;
            _this.setState({ markers: existingMarkers });
        }
        else{
            var existingMarkers=_this.state.markers;
            existingMarkers[existingMarkers.length]=marker_data;
            _this.setState({ markers: existingMarkers });
        }
    }

然后在 render()

    const _this=this;

    const markerElements = this.state.markers.map(function(marker_data) {
        //console.log(coord);
        return <Marker key={marker_data.id} data={marker_data} name={'Marker '+marker_data.id} position={marker_data.loc} onClick={_this.onMarkerClick} />;
      //return <Marker name={'Marker '+marker_data.id} position={marker_data.loc} onClick={_this.onMarkerClick}/>
    });
    <Map google={this.props.google}
        zoom={14}
        onReady={this.handleReady}
        onClick={this.onMapClick}
        initialCenter={{"lat": 33.051,"lng": -79.93}}
    >
        {markerElements}
        <InfoWindow marker={_this.state.activeMarker} visible={_this.state.showingInfoWindow} onClose={_this.windowHasClosed}>
            <div><h1>{'Marker ID: '}</h1></div>
        </InfoWindow>
    </Map>

那么，可以在哪里使用标记动画（或类似的东西）？

4

0 回答 0