react-google-maps 中自定义样式的 Google 地图

Question

我正在尝试给我的谷歌地图一个不同的外观。我将此代码作为如何操作的说明：https://github.com/wuct/react-google-maps/blob/21d70d0afd03aa802cdc69028c8ead2f35b3c1ce/examples/gh-pages/scripts/components/basics/StyledMap.js#L40-L43

到目前为止，我的代码如下所示：

import "./UserReportsMap.css"

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'

const Map = withGoogleMap(props => (
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: 53.55, lng: 10.00 }}
        defaultOptions={{
            scrollwheel: false,
            streetViewControl: false
        }}
        >
        {props.markers.map((marker, index) => (
            <Marker
                {...marker}
            />
        ))}
    </GoogleMap>
    )
)

class UserReportsMap extends Component {

static getCloudEmoji(report) {
    return "/img/noto/" + report.info.clouds + ".png"}

mapReportsToMarkers = reports => (
    reports.map(report => ({
        position: {
            lat: report.info.position.latitude,
            lng: report.info.position.longitude
        },
        defaultAnimation: 2,
        key: report.id,
        options: {
            icon: UserReportsMap.getCloudEmoji(report)
        }
    }))
)

render() {
    return (
        <div className="report-map">
            <Map
                containerElement={
                    <div style={{ height: '100%' }} />
                }
                mapElement={
                    <div style={{ height: '100%' }} />
                }
                markers={this.mapReportsToMarkers(this.props.reports)}
                styles={mapStyles}
                />
        </div>
    )
     }
}

StyledMap.defaultProps = {
// The style is copy from https://snazzymaps.com/style/2/midnight-commander
mapStyles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"color":"#000000"},{"lightness":13}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#144b53"},{"lightness":14},{"weight":1.4}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#08304b"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#0c4152"},{"lightness":5}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#0b434f"},{"lightness":25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#0b3d51"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"}]},{"featureType":"transit","elementType":"all","stylers":[{"color":"#146474"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#021019"}]}]
 }

function mapStateToProps(state) {
    return {
         reports: state.reports.all
     }
}

export default connect(mapStateToProps, null)(UserReportsMap)

我不断收到错误

./src/page/weather/UserReportsMap/UserReportsMap.js
Line 55:  'mapStyles' is not defined  no-undef
Line 62:  'StyledMap' is not defined  no-undef

有人可以帮忙吗？我做错了什么？

Answer 1

使用 react.google.maps，您可以使用以下方式设置地图样式：

const exampleMapStyles = [
    {
        featureType: "poi",
        elementType: "geometry",
        stylers: [
            {
                color: "#eeeeee",
            },
        ],
    },
    {
        featureType: "poi",
        elementType: "labels.text",
        stylers: [
            {
                visibility: "off",
            },
        ],
    },
    {
        featureType: "water",
        elementType: "labels.text.fill",
        stylers: [
            {
                color: "#9e9e9e",
            },
        ],
    },
];

const gogleMap = (
    <GoogleMap
        options={{
            styles: exampleMapStyles,
        }}
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}
    >
        <Marker position={{ lat: -34.397, lng: 150.644 }} />
    </GoogleMap>
);

或者

const gogleMap = (
        <GoogleMap
            defaultOptions={{
                styles: exampleMapStyles,
            }}
            defaultZoom={8}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}
        >
            <Marker position={{ lat: -34.397, lng: 150.644 }} />
        </GoogleMap>
    );

您不会在官方文档中找到它。但是，这行得通。

Answer 2

将StyledMap.defaultProps 更改为UserReportsMap.defaultProps

Answer 3

如果未加载脚本和 API 密钥，则应加载它。

如果已加载，请尝试将此 /*global google*/ 添加到文件顶部。这样你就可以访问google命名空间下的类，比如google.maps.Size。

另外，请read this。

Answer 4

要添加到 asmmahmud 的答案，现在有 https://mapstyle.withgoogle.com/，您可以在其中玩弄地图上的样式，然后它会为您提供一个 json，您可以复制以在您的代码中使用。然后，您可以将该 json 放在一个 const 中，并将其添加到您的 GoogleMap 上的 options 属性中

例如

    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: 53.55, lng: 10.00 }}
        defaultOptions={{
            scrollwheel: false,
            streetViewControl: false
        }}
        options={{ styles }}
       >
        {props.markers.map((marker, index) => (
            <Marker
                {...marker}
            />
        ))}
    </GoogleMap>



// this is what the exported json gives you
const styles =[
    {
        featureType: "poi",
        elementType: "geometry",
        stylers: [
            {
                color: "#eeeeee",
            },
        ],
    },
    {
        featureType: "poi",
        elementType: "labels.text",
        stylers: [
            {
                visibility: "off",
            },
        ],
    },
    {
        featureType: "water",
        elementType: "labels.text.fill",
        stylers: [
            {
                color: "#9e9e9e",
            },
        ],
    },
];