Question

有人可以帮助我向我的react项目添加Snazzy地图样式。我已成功加载地图。现在，我想为其添加时髦的地图样式。

我要添加的样式是：https://snazzymaps.com/style/38/shades-of-grey

我的代码如下

            <Map 
            google={this.props.google}
            zoom={20}
            bootstrapURLKeys={{
                key: 'AIzaSyCbwAIiqBpdHLZ1Isdc5kXqQagCoerKbEg'
            }}
            style={""}
            className="map"
            initialCenter={{
                lat: 10.010533, 
                lng: 76.365536
              }}
            >

Answer 1

尝试了不同的语法并使其起作用。

import React,{ Component } from 'react';
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const stylesArr = [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}];
const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR-KEY&callback=initMap",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `100%` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={15}
    defaultCenter={{ lat: 10.010533,lng: 76.365536 }}
    defaultOptions={{ styles: stylesArr }}

  >
    {props.isMarkerShown && <Marker position={{ lat: 10.010533,lng: 76.365536 }} />}
  </GoogleMap>
)

export default MyMapComponent;

如何在react

1 个答案: