在移动设备上反应谷歌地图街景

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(视点(遵循设备的方向。这主要适用于移动设备。如果在启用运动跟踪控制时将运动跟踪设置为 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;
}
}