如何解决如何在React中更改Google Maps Directions API上的地址
一般来说,我对React和javascript还是很陌生,所以这可能是一个简单的问题。
我正在使用react-google-maps查找两个地址之间的路线并将其呈现在地图上。
我从react-google-maps文档中获取了代码:
import React from "react";
import Geocode from "react-geocode";
const { compose,withProps,lifecycle } = require("recompose");
const {
withScriptjs,withGoogleMap,GoogleMap,DirectionsRenderer,} = require("react-google-maps");
// Get latidude & longitude from address.
// Geocode.fromAddress("Example Street 123").then(
// (response) => {
// const { lat,lng } = response.results[0].geometry.location;
// console.log(lat,lng);
// },// (error) => {
// console.error(error);
// }
// );
const MapWithADirectionsRenderer = compose(
withProps({
googleMapURL:
"https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&v=3.exp&libraries=geometry,drawing,places",loadingElement: <div style={{ height: `100%` }} />,containerElement: <div style={{ height: `400px` }} />,mapElement: <div style={{ height: `100%` }} />,}),withScriptjs,lifecycle({
componentDidMount() {
const directionsService = new google.maps.DirectionsService();
const origin = new google.maps.LatLng(-33.3666942,-70.50202159999999);
const destination = new google.maps.LatLng(-33.3712284,-70.5051112);
directionsService.route(
{
origin: origin,destination: destination,travelMode: google.maps.TravelMode.DRIVING,waypoints: [
// {
// location: new google.maps.LatLng(),// },// {
// location: new google.maps.LatLng(6.6018,3.3515),],},(result,status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,});
} else {
console.error(`error fetching directions ${result}`);
}
}
);
},})
)((props) => (
<GoogleMap
defaultZoom={7}
defaultCenter={new google.maps.LatLng(-33.436933,-70.634359)}
>
{props.directions && <DirectionsRenderer directions={props.directions} />}
</GoogleMap>
));
export default MapWithADirectionsRenderer;
在App.js上,我将此组件称为:
<MapWithADirectionsRenderer direccion={direccionOrigen} />
</div>
我无法在MapWithADirectionsRenderer组件内部传递信息,直到行为止
const destination = new google.maps.LatLng(-33.3712284,-70.5051112);
我正在考虑使用Geocode.fromAddress
获取坐标,然后将其传递到相应的行内。
我希望问题已经解决。我只是对recompose
和react-google-maps
中的某些功能不太熟悉。
谢谢大家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。