手机上的 react-google-maps 街景

Question

我在我的应用程序中实现了 react-google-maps 包。一切正常，但是当我在移动设备上查看网站并转到街景时，默认情况下会打开一些选项，它可以使地图随着移动设备的转动而转动。此选项默认开启。右上角有一个小移动图标，如果我按下它，它将被关闭，在街景中移动的唯一方法是用手指。 当有人进入街景时，如何将手指的这种“正常”动作设为默认？

编辑： 添加示例

import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow, } from 'react-google-maps'
import Image from 'semantic-ui-react/dist/commonjs/elements/Image/Image'

class MapInfoComponent extends Component {
  state = {
    openInfoWindow: true,
  }

  onMarkerClick = () => {
    this.setState(prevState => ({
      openInfoWindow: !prevState.openInfoWindow,
    }))
  }

  render() {
    return (
      <GoogleMap defaultZoom={10} center={{ lat: 16.4555, lng: 14.1257, }}>
        <Marker position={{ lat: 16.4555, lng: 14.1257, }} onClick={this.onMarkerClick}>
          {this.state.openInfoWindow && (
            <InfoWindow onCloseClick={this.onMarkerClick}>
              <Image src={logo} size="small" />
            </InfoWindow>
          )}
        </Marker>
      </GoogleMap>
    )
  }
}


const GoogleMapComponent = withGoogleMap(MapInfoComponent)
const MapComponent = withScriptjs(GoogleMapComponent)

const Maps = () => (
  <div styleName="container">
    <MapComponent
      googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAPS ||
        'addGoogleMapsKey'}&v=3.exp&libraries=geometry,drawing,places`}
      loadingElement={<div style={{ height: '100%', }} />}
      containerElement={<div style={{ height: '100%', }} />}
      mapElement={<div style={{ height: '100%', }} />}
    />
  </div>
)

export default Maps

Answer 1

您要查找的功能称为motionTracking。

对于react-google-maps，我假设您在代码中使用了StreetViewPanorama 组件。上面有两个道具：defaultMotionTracking 和 motionTracking。将defaultMotionTracking 设置为 false。

否则默认结束：

运动跟踪是打开还是关闭。 存在运动跟踪控件时默认启用，以便 POV（视点）跟随设备的方向。这主要适用于移动设备。如果在启用motionTrackingControl 时将motionTracking 设置为false，则会显示运动跟踪控件，但会关闭跟踪。用户可以点击运动跟踪控件来切换此选项。

见react-google-maps docs & Google Maps Platform docs。

编辑：根据您的示例，这是一个可能的解决方案（尚未测试，但在概念上应该可行）：

import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow, } from 'react-google-maps'
import Image from 'semantic-ui-react/dist/commonjs/elements/Image/Image'

class MapInfoComponent extends Component {
  state = {
    openInfoWindow: true,
  }

  onMarkerClick = () => {
    this.setState(prevState => ({
      openInfoWindow: !prevState.openInfoWindow,
    }))
  }

  buildGoogleMap() {
    return (
      <GoogleMap defaultZoom={10} center={{ lat: 16.4555, lng: 14.1257, }}>
        <Marker position={{ lat: 16.4555, lng: 14.1257, }} onClick={this.onMarkerClick}>
          {this.state.openInfoWindow && (
            <InfoWindow onCloseClick={this.onMarkerClick}>
              <Image src={logo} size="small" />
            </InfoWindow>
          )}
        </Marker>
      </GoogleMap>
    )
  }

  render() {
    const googleMap = this.buildGoogleMap();
    googleMap.getStreetView().setMotionTracking(false);
    return googleMap;
  }
}