如何使用 react-google-maps 禁用街景?

ste*_*opo 3 reactjs react-google-maps

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

文档中,我看到有以下道具:

  • 默认街景

  • 街景

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

代码片段在这里:

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;
Run Code Online (Sandbox Code Playgroud)

ste*_*opo 9

在这种情况下,似乎道具 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;
Run Code Online (Sandbox Code Playgroud)