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;
  }
}

在移动设备上反应Google街景

1 个答案: