如何使用 react-google-maps 禁用街景？答案

【问题标题】：How to disable street view with react-google-maps?如何使用 react-google-maps 禁用街景？
【发布时间】：2019-07-14 03:16:46
【问题描述】：

我正在使用 react-google-maps 包在我的反应应用程序中呈现 Google 地图。我想禁用街景。

来自the documentation，我看到有以下道具：

默认街景
街景

我尝试过将两者都与 false 一起使用 - 但两者都不起作用。有谁知道如何通过这个包禁用街景功能？

代码 sn-p 在这里：

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import PropTypes from 'prop-types';

const Map = withScriptjs(withGoogleMap((props) => {
    return(
        <GoogleMap 
            defaultZoom={17}
            defaultCenter={{ lat: props.lat, lng: props.lng }}
            // defaultStreetView={false}
            // streetView={false}
        >
            {props.isMarkerShown && <Marker position={{ lat: props.lat, lng: props.lng }} />}
        </GoogleMap>
    )
}))

Map.propTypes = {
    lat: PropTypes.number.isRequired,
    lng: PropTypes.number.isRequired,
    isMarkerShown: PropTypes.bool.isRequired
}

export default Map;

【问题讨论】：

标签： reactjs react-google-maps

【解决方案1】：

在这种情况下，道具 defaultStreetView 和 streetView 似乎实际上并不相关。

实现这一点的方法是将 { streetViewControl: false } 传递给 options 属性。

正确代码：

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import PropTypes from 'prop-types';

const Map = withScriptjs(withGoogleMap((props) => {
    return(
        <GoogleMap 
            defaultZoom={17}
            defaultCenter={{ lat: props.lat, lng: props.lng }}
            options={{streetViewControl: false}}
        >
            {props.isMarkerShown && <Marker position={{ lat: props.lat, lng: props.lng }} />}
        </GoogleMap>
    )
}))

Map.propTypes = {
    lat: PropTypes.number.isRequired,
    lng: PropTypes.number.isRequired,
    isMarkerShown: PropTypes.bool.isRequired
}

export default Map;

【讨论】：