客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：fullstackreact/google-maps-react开源软件地址(OpenSource Url)：https://github.com/fullstackreact/google-maps-react开源编程语言(OpenSource Language)：JavaScript 99.0%开源软件介绍(OpenSource Introduction)：
Google Map React Component Tutorial
See the demo and accompanying blog post. QuickstartFirst, install the library: npm install --save google-maps-reactAutomatically Lazy-loading Google APIThe library includes a helper to wrap around the Google maps API. The import {GoogleApiWrapper} from 'google-maps-react';
// ...
export class MapContainer extends React.Component {}
export default GoogleApiWrapper({
apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)Alternatively, the export default GoogleApiWrapper(
(props) => ({
apiKey: props.apiKey,
language: props.language,
}
))(MapContainer)If you want to add a loading container other than the default loading container, simply pass it in the HOC, like so: const LoadingContainer = (props) => (
<div>Fancy loading container!</div>
)
export default GoogleApiWrapper({
apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE),
LoadingContainer: LoadingContainer
})(MapContainer)Sample Usage With Lazy-loading Google API:import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
export class MapContainer extends Component {
render() {
return (
<Map google={this.props.google} zoom={14}>
<Marker onClick={this.onMarkerClick}
name={'Current location'} />
<InfoWindow onClose={this.onInfoWindowClose}>
<div>
<h1>{this.state.selectedPlace.name}</h1>
</div>
</InfoWindow>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(MapContainer)Note: Marker and InfoWindow components are disscussed below. ExamplesCheck out the example site at: http://fullstackreact.github.io/google-maps-react Additional Map PropsThe Map component takes a number of optional props. Zoom: (Shown Above) takes a number with the higher value representing a tighter focus on the map's center. Style: Takes CSS style object - commonly width and height. const style = {
width: '100%',
height: '100%'
}Container Style: Takes CSS style object - optional, commonly when you want to change from the default of position "absolute". const containerStyle = {
position: 'relative',
width: '100%',
height: '100%'
} <Map
containerStyle={containerStyle}initialCenter: Takes an object containing latitude and longitude coordinates. Sets the maps center upon loading. <Map
google={this.props.google}
style={style}
initialCenter={{
lat: 40.854885,
lng: -88.081807
}}
zoom={15}
onClick={this.onMapClicked}
>center: Takes an object containing latitude and longitude coordinates. Use this if you want to re-render the map after the initial render. <Map
google={this.props.google}
style={style}
center={{
lat: 40.854885,
lng: -88.081807
}}
zoom={15}
onClick={this.onMapClicked}
>bounds: Takes a google.maps.LatLngBounds() object to adjust the center and zoom of the map. var points = [
{ lat: 42.02, lng: -77.01 },
{ lat: 42.03, lng: -77.02 },
{ lat: 41.03, lng: -77.04 },
{ lat: 42.05, lng: -77.02 }
]
var bounds = new this.props.google.maps.LatLngBounds();
for (var i = 0; i < points.length; i++) {
bounds.extend(points[i]);
}
return (
<Map
google={this.props.google}
initialCenter={{
lat: 42.39,
lng: -72.52
}}
bounds={bounds}>
</Map>
);The following props are boolean values for map behavior:
The following props are boolean values for presence of controls on the map:
The following props are object values for control options such as placement of controls on the map:
It also takes event handlers described below: EventsThe onReadyWhen the fetchPlaces(mapProps, map) {
const {google} = mapProps;
const service = new google.maps.places.PlacesService(map);
// ...
}
render() {
return (
<Map google={this.props.google}
onReady={this.fetchPlaces}
visible={false}>
<Listing places={this.state.places} />
</Map>
)
}onClickTo listen for clicks on the mapClicked(mapProps, map, clickEvent) {
// ...
}
render() {
return (
<Map google={this.props.google}
onClick={this.mapClicked} />
)
}onDragendWhen our user changes the map center by dragging the Map around, we can get a callback after the event is fired with the centerMoved(mapProps, map) {
// ...
}
render() {
return (
<Map google={this.props.google}
onDragend={this.centerMoved} />
)
}The VisibilityYou can control the visibility of the map by using the For example: <Map google={this.props.google}
visible={false}>
<Listing places={this.state.places} />
</Map>SubcomponentsThe
MarkerTo place a marker on the Map, include it as a child of the <Map google={this.props.google}
style={{width: '100%', height: '100%', position: 'relative'}}
className={'map'}
zoom={14}>
<Marker
title={'The marker`s title will appear as a tooltip.'}
name={'SOMA'}
position={{lat: 37.778519, lng: -122.405640}} />
<Marker
name={'Dolores park'}
position={{lat: 37.759703, lng: -122.428093}} />
<Marker />
<Marker
name={'Your position'}
position={{lat: 37.762391, lng: -122.439192}}
icon={{
url: "/path/to/custom_icon.png",
anchor: new google.maps.Point(32,32),
scaledSize: new google.maps.Size(64,64)
}} />
</Map>The If no You can also pass any other The marker component can also accept a child InfoMarker component for situations where there is only 1 marker and 1 infowindow. moveMarker(props, marker, e) {
console.log(e.latLng.lat(), e.latLng.lng()) // get the new coordinates after drag end
}<Marker
title="Location"
id={1}
position={markerCenter}
draggable={true}
onDragend={this.moveMarker.bind(this)}
>
<InfoWindow
visible={showInfoWindow}
style={styles.infoWindow}
>
<div className={classes.infoWindow}>
<p>Click on the map or drag the marker to select location where the incident occurred</p>
</div>
</InfoWindow>
</Marker>EventsThe onClickYou can listen for an onMarkerClick(props, marker, e) {
// ..
}
render() {
return (
<Map google={this.props.google}>
<Marker onClick={this.onMarkerClick}
name={'Current location'} />
</Map>
)
}mouseoverYou can also pass a callback when the user mouses over a onMouseoverMarker(props, marker, e) {
// ..
}
render() {
return (
<Map google={this.props.google}>
<Marker onMouseover={this.onMouseoverMarker}
name={'Current location'} />
</Map>
)
}PolygonTo place a polygon on the Map, set render() {
const triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];
return(
<Map google={this.props.google}
style={{width: '100%', height: '100%', position: 'relative'}}
className={'map'}
zoom={14}>
<Polygon
paths={triangleCoords}
strokeColor="#0000FF"
strokeOpacity={0.8}
strokeWeight={2}
fillColor="#0000FF"
fillOpacity={0.35} />
</Map>
)
}EventsThe |
请发表评论