[英]Google map with react-google-maps API
I'm new with maps and I need to implement a route and also get the distance.我是地图新手,我需要实施路线并获得距离。 I'm using react-google-map s API and I have found this way to show the map, and the route.
我正在使用 react-google-map的API 并且我发现这种方式可以显示 map 和路线。
It is the first time that I build a component like this and now I don't know how to access the data that is outside the class component.这是我第一次构建这样的组件,现在我不知道如何访问 class 组件之外的数据。 Basically, I would like to add the data from the search box (coordinates) to the origin in the DirectionService.route, and also to get the distance.
基本上,我想将搜索框(坐标)中的数据添加到 DirectionService.route 中的原点,并获取距离。 Do you know how can I access that data?
你知道我怎样才能访问这些数据吗?
I've been reading that componentWillMount is being deprecated but it is the only way that I made it work, if you have any suggestions I'll be happy to try.我一直在阅读 componentWillMount 已被弃用,但这是我使它工作的唯一方法,如果您有任何建议,我很乐意尝试。
import React from 'react' import { compose, withProps, lifecycle } from 'recompose' import {withScriptjs, withGoogleMap, GoogleMap, DirectionsRenderer} from 'react-google-maps' const { StandaloneSearchBox } = require("react-google-maps/lib/components/places/StandaloneSearchBox"); const DirectionsComponent = compose( withProps({ googleMapURL: "https://maps.googleapis.com/maps/api/js?key='yourkey'&libraries=geometry,drawing,places", loadingElement: <div style={{ height: `400px` }} />, containerElement: <div style={{ width: `100%` }} />, mapElement: <div style={{height: `600px`, width: `600px` }} />, }), withScriptjs, withGoogleMap, lifecycle({ componentWillMount() { const refs = {}; this.setState({ places: [], onSearchBoxMounted: ref => { refs.searchBox = ref; }, onPlacesChanged: () => { const places = refs.searchBox.getPlaces(); console.log(places) this.setState({ places }); } }); }, componentDidMount() { const google = window.google const DirectionsService = new google.maps.DirectionsService(); DirectionsService.route({ origin: new google.maps.LatLng(41.3851, -2.1734), destination: new google.maps.LatLng(40.4165, -3.70256), travelMode: google.maps.TravelMode.DRIVING, }, (result, status) => { console.log(result) if (status === google.maps.DirectionsStatus.OK) { this.setState({ directions: {...result}, markers: true }) const distance = result.routes[0].legs[0].distance['text'] console.log(distance) } else { console.error(`error fetching directions ${result}`); } }); } }) )(props => <div data-standalone-searchbox=""> <StandaloneSearchBox ref={props.onSearchBoxMounted} bounds={props.bounds} onPlacesChanged={props.onPlacesChanged} > <input type="text" placeholder="Enter your destination" style={{ boxSizing: `border-box`, border: `1px solid transparent`, width: `240px`, height: `32px`, padding: `0 12px`, borderRadius: `3px`, boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`, fontSize: `14px`, outline: `none`, textOverflow: `ellipses` }} /> </StandaloneSearchBox> <ol> {props.places.map( ({ place_id, formatted_address, geometry: { location } }) => ( <li key={place_id}> {formatted_address} {" at "} ({location.lat()}, {location.lng()}) </li> ) )} </ol> <GoogleMap defaultZoom={3}> {props.directions && <DirectionsRenderer directions={props.directions} suppressMarkers={props.markers} />} </GoogleMap> </div> ); class MyMapComponent extends React.PureComponent { constructor(props) { super(props) console.log(props) this.state = { } } render() { return ( <div> <DirectionsComponent/> </div> ) } } export default MyMapComponent
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
First of, please remove the API key in your question and don't post it in public sites in the future to protect it.首先,请删除您问题中的 API 密钥,以后不要将其发布在公共站点以保护它。
I successfully coded your use case but I used the @react-google-maps/api since this is a complete re-write of the (sadly unmaintained) react-google-maps library.我成功编写了您的用例,但我使用了@react-google-maps/api ,因为这是对(遗憾的是未维护)react-google-maps 库的完全重写。 Then instead of
componentWillMount
I used the OnLoad
callback used which is called when the map instance has loaded.然后,我使用了在 map 实例加载时调用的
OnLoad
回调,而不是componentWillMount
。
Please see the working sample code here and code snippet with inline comments below:请在此处查看工作示例代码以及下面带有内联注释的代码片段:
Index.js索引.js
import React, { Component } from "react";
import { render } from "react-dom";
import { LoadScript } from "@react-google-maps/api";
import Map from "./Map";
import "./style.css";
const lib = ["places"];
const key = ""; // PUT GMAP API KEY HERE
class App extends React.Component {
render() {
return (
<LoadScript googleMapsApiKey={key} libraries={lib}>
<Map />
</LoadScript>
);
}
}
render(<App />, document.getElementById("root"));
Map.js Map.js
/*global google*/
import ReactDOM from "react-dom";
import React from "react";
import {
GoogleMap,
StandaloneSearchBox,
DirectionsRenderer
} from "@react-google-maps/api";
const defaultLocation = { lat: 40.756795, lng: -73.954298 };
let destination = { lat: 41.756795, lng: -78.954298 };
let origin = { lat: 40.756795, lng: -73.954298 };
let directionsService;
class Map extends React.Component {
state = {
directions: null,
bounds: null
};
onMapLoad = map => {
directionsService = new google.maps.DirectionsService();
//load default origin and destination
this.changeDirection(origin, destination);
};
//function that is called when SearchBox has loaded and assigned ref to this.searchbox to get the searchbox object
onSBLoad = ref => {
this.searchBox = ref;
};
onPlacesChanged = () => {
//pass the new place location as the origin
this.changeDirection(
this.searchBox.getPlaces()[0].geometry.location,
destination
);
};
//function that is calling the directions service
changeDirection = (origin, destination) => {
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
//changing the state of directions to the result of direction service
this.setState({
directions: result
});
} else {
console.error(`error fetching directions ${result}`);
}
}
);
};
render() {
return (
<div>
<div id="searchbox">
<StandaloneSearchBox
onLoad={this.onSBLoad}
onPlacesChanged={this.onPlacesChanged}
>
<input
type="text"
placeholder="Customized your placeholder"
style={{
boxSizing: `border-box`,
border: `1px solid transparent`,
width: `240px`,
height: `32px`,
padding: `0 12px`,
borderRadius: `3px`,
boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
fontSize: `14px`,
outline: `none`,
textOverflow: `ellipses`,
position: "absolute",
left: "50%",
marginLeft: "-120px"
}}
/>
</StandaloneSearchBox>
</div>
<br />
<div>
<GoogleMap
center={defaultLocation}
zoom={5}
onLoad={map => this.onMapLoad(map)}
mapContainerStyle={{ height: "400px", width: "800px" }}
>
{this.state.directions !== null && (
<DirectionsRenderer directions={this.state.directions} />
)}
</GoogleMap>
</div>
</div>
);
}
}
export default Map;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.