小编Bij*_*Das的帖子

如何在react-google-maps中添加标记移动动画?

如何在 React 应用程序中实现标记移动动画。我已经将react-google-maps用于谷歌地图。

我正在浏览该库和 Google 地图 API 的文档。Google Maps API 中有一个偏移选项。但我不是在寻找那个。

该应用程序将通过 socket.io 服务器接收更新的坐标。一旦坐标到达,标记就需要移动,就像 Uber 应用程序一样。

GitHub上有一个未解决的问题,尚未关闭。

目前,我可以移动坐标更新上的标记,但没有动画。

示例代码

import React, { Component } from 'react';
import Socket from 'socket.io-client';
import { withRouter } from 'react-router-dom';
import {
    GoogleMap,
    withScriptjs,
    withGoogleMap,
    Marker
} from 'react-google-maps';

import { googleMapsUrl, socketUrl } from '../../../config/constants';

const io = Socket(socketUrl('dev'));

class GoogleMaps extends Component {
    constructor(props) {
        super(props);
        this.state = {
            defaultCenter: {
                clientId: "FAKE_CLIENT_ID",
                imei:     "FAKE_IMEI_NUMBER",
                lat:      28.554907,
                lng:      77.554385, …
Run Code Online (Sandbox Code Playgroud)

google-maps google-maps-api-3 reactjs react-google-maps

5
推荐指数
0
解决办法
1617
查看次数