我正在使用React和Google-Map-React组件,想要为我谷歌地图添加一个皮肤。你知道在哪里可以做到吗?我想使用Snazzymap皮肤,他们提供一系列的样式。
https://snazzymaps.com/style/25/blue-water
Snazzy Maps提供了
import React from 'react';
import ReactDom from 'react-dom';
//import shouldPureComponentUpdate from 'react-pure-render/function';
import GoogleMap from 'google-map-react';
var divStyle = {
paddingTop: 20,
paddingLeft: 20,
paddingRight: 20,
width:1024,
height:768
};
const K_WIDTH = 40;
const K_HEIGHT = 40;
const greatPlaceStyle = {
// initially any map object has left top corner at lat lng coordinates
// it's on you to set object origin to 0,0 coordinates
position: 'absolute',
width: K_WIDTH,
height: K_HEIGHT,
left: -K_WIDTH / 2,
top: -K_HEIGHT / 2,
border: '5px solid #f44336',
borderRadius: K_HEIGHT,
backgroundColor: 'white',
textAlign: 'center',
color: '#3f51b5',
fontSize: 16,
fontWeight: 'bold',
padding: 4
};
class MyGreatPlace extends React.Component {
static propTypes = {
text: React.PropTypes.string
};
static defaultProps = {};
//shouldComponentUpdate = shouldPureComponentUpdate;
constructor(props) {
super(props);
}
render() {
return (
<div style={greatPlaceStyle}>
{this.props.text}
</div>
);
}
}
class SimpleMapPage extends React.Component {
static defaultProps = {
defaultCenter: {lat: 59.938043, lng: 30.337157},
zoom: 12,
greatPlaceCoords: {lat: 59.724465, lng: 30.080121}
};
//shouldComponentUpdate = shouldPureComponentUpdate;
constructor(props) {
super(props);
}
componentWillReceiveProps(nextProps) {
// console.log("test")
}
render() {
return (
<div style={divStyle}>
<GoogleMap
bootstrapURLKeys={{
key: '312312j3kl12j321random'
}}
center={this.props.center}
zoom={this.props.zoom}
defaultCenter={this.props.defaultCenter}
defaultZoom={this.props.zoom}
>
<MyGreatPlace lat={this.props.center.lat} lng={this.props.center.lng} text={'Site'} /* Kreyser Avrora */ />
</GoogleMap>
</div>
);
}
}
export default SimpleMapPage