Реакция улиц google-maps на мобильный телефон

Question

Я реализовал в своей программе пакет response-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 ложно.

В противном случае значение по умолчанию заканчивается:

Включено или выключено отслеживание движения. Включено по умолчанию, когда присутствует элемент управления отслеживанием движения, так что POV (точка обзора) следует ориентации устройства. Это в первую очередь относится к мобильным устройствам. Если для параметра motionTracking установлено значение false, а функция motionTrackingControl включена, появляется элемент управления отслеживанием движения, но отслеживание отключено. Пользователь может нажать элемент управления отслеживанием движения, чтобы включить эту опцию.

См. Документы response-google-maps и документы Google Maps Platform.

РЕДАКТИРОВАТЬ: В вашем примере, вот возможное решение (не тестировал, но концептуально должно работать):

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