Question

我正在开发一个反应式网络客户端应用程序，该应用程序会侦听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>

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

如何：google-maps-react标记缓动

0 个答案: