просмотр улиц реагировать-google-maps на мобильном телефоне

Я реализовал пакет 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

reactjs google-maps react-google-maps
person Igor-Vuk    schedule 03.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

См. документы по react-google-maps и документы платформы Google Карт.

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

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

person Tadas Antanavicius    schedule 04.07.2018
comment
Спасибо Тадас. Я только что проверил это и добавил пример в свой пост. Я не использую StreetViewPanorama, но проблема похожа на ту, что вы описали. - person Igor-Vuk; 04.07.2018
comment
Попробуйте взглянуть на GoogleMap исходный код< /а>. Похоже, что существует недокументированный метод setStreetView, в котором вы можете создать и установить свой собственный StreetViewPanorama. Этот метод кратко упоминается, но не подробно рассматривается в документации. У меня нет времени погружаться в это некоторое время, но дайте мне знать, если это поможет вам - person Tadas Antanavicius; 04.07.2018
comment
@Igor-Vuk добавил пример, который должен помочь - person Tadas Antanavicius; 06.07.2018