реакция улиц Google Maps на мобильный телефон - PullRequest
Новая
       15

реакция улиц Google Maps на мобильный телефон

0 голосов
/ 03 июля 2018

В моем приложении я реализовал пакет response-google-maps. Все работает нормально, но когда я смотрю веб-сайт на мобильном телефоне и перехожу к просмотру улиц, по умолчанию включается какая-то опция, позволяющая поворачивать карту при повороте мобильного телефона. Эта опция включена по умолчанию. В правом углу есть небольшая иконка мобильного телефона, и если я нажму на нее, она будет отключена, и единственный способ двигаться в режиме просмотра улиц будет с помощью пальцев. Как сделать это "нормальное" движение пальцами по умолчанию, когда кто-то входит в режим просмотра улиц?

EDIT: Добавить пример 

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

1 Ответ

0 голосов
/ 04 июля 2018

Функция, которую вы ищете, называется motionTracking.

С react-google-maps я предполагаю, что вы используете в своем коде компонент StreetViewPanorama. На нем два реквизита: defaultMotionTracking и motionTracking. Установите для defaultMotionTracking значение false.

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

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

См. документы о реакциях google-maps & Документы платформы 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,
    }))
  }

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