在移动设备上反应Google街景

Question

I implemented react-google-maps package in my application. Everything works fine but when I look website on mobile and go to street view there is some option turned on by default which enables that map turns around as mobile turns around. This option is turned on by default. There is a little mobile icon in the right corner and If I press it, this will be turned off and the only way to move in street view will be with fingers. How do I make this "normal" movement with fingers a default when someone enters street view?

EDIT: Add example

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

The feature you're looking for is called motionTracking .

With react-google-maps , I assume you're using the StreetViewPanorama component in your code. There's two props on it: defaultMotionTracking and motionTracking . Set defaultMotionTracking to false.

Otherwise the default ends up:

Whether motion tracking is on or off. Enabled by default when the motion tracking control is present , so that the POV (point of view) follows the orientation of the device. This is primarily applicable to mobile devices. If motionTracking is set to false while motionTrackingControl is enabled, the motion tracking control appears but tracking is off. The user can tap the motion tracking control to toggle this option.

See react-google-maps docs & Google Maps Platform docs .

EDIT: Per your example, here's a possible solution (haven't tested, but conceptually should work):

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