gpt4 book ai didi

javascript - 我如何使用 react-google-maps 组件绘制路线?

转载 作者:行者123 更新时间:2023-11-30 11:06:27 24 4
gpt4 key购买 nike

我正在尝试使用 react-google-maps 在两点之间绘制一条路线,但对我不起作用。你能帮我解决这个问题吗?这是我的 react 组件的示例。

import React from 'react';
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} from 'react-google-maps';
import MapDirectionsRenderer from './app_map_directions_render';

const Map = withScriptjs(
withGoogleMap(props => (
<GoogleMap
defaultCenter={props.defaultCenter}
defaultZoom={props.defaultZoom}
>
{props.places.map((marker, index) => {
const position = {lat: marker.latitude, lng: marker.longitude};
return <Marker key={index} position={position}/>;
})}
<MapDirectionsRenderer places={props.places} travelMode={window.google.maps.TravelMode.DRIVING} />
</GoogleMap>
))
);

const AppMap = props => {
const {places} = props;

const {
loadingElement,
containerElement,
mapElement,
defaultCenter,
defaultZoom
} = props;

return (
<Map
googleMapURL={
'https://maps.googleapis.com/maps/api/js?key=' +
googleMapsApiKey +
'&v=3.exp&libraries=geometry,drawing,places'
}
places={places}
loadingElement={loadingElement || <div style={{height: `100%`}}/>}
containerElement={containerElement || <div style={{height: "80vh"}}/>}
mapElement={mapElement || <div style={{height: `100%`}}/>}
defaultCenter={defaultCenter || {lat: 25.798939, lng: -80.291409}}
defaultZoom={defaultZoom || 11}
/>
);
};

export default AppMap;

还有我的 MapDirectionsRenderer 组件

import React, {Component} from 'react';
import { DirectionsRenderer } from "react-google-maps";

export default class MapDirectionsRenderer extends Component {
state = {
directions: null,
error: null
};

componentDidMount() {
const { places, travelMode } = this.props;

const waypoints = places.map(p =>({
location: {lat: p.latitude, lng: p.longitude},
stopover: true
}))
if(waypoints.length >= 2){
const origin = waypoints.shift().location;
const destination = waypoints.pop().location;

const directionsService = new window.google.maps.DirectionsService();
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: travelMode,
waypoints: waypoints
},
(result, status) => {
if (status === window.google.maps.DirectionsStatus.OK) {
this.setState({
directions: result
});
} else {
this.setState({ error: result });
}
}
);
}
}

render() {
if (this.state.error) {
return <h1>{this.state.error}</h1>;
}
return <DirectionsRenderer directions={this.state.directions} />;
}
}

最佳答案

为了呈现路线,Google Maps API 提供了 Directions Service , 如果是 react-google-maps library DirectionsRenderer component可用,它是 DirectionsRenderer class 的包装器反过来:

Renders directions obtained from the DirectionsService.

假设路由数据以下列格式提供:

const places = [
{latitude: 25.8103146,longitude: -80.1751609},
{latitude: 27.9947147,longitude: -82.5943645},
{latitude: 28.4813018,longitude: -81.4387899},
//...
]

可以通过 react-google-maps library 引入以下组件来计算和呈现方向 :

class MapDirectionsRenderer extends React.Component {
state = {
directions: null,
error: null
};

componentDidMount() {
const { places, travelMode } = this.props;

const waypoints = places.map(p =>({
location: {lat: p.latitude, lng:p.longitude},
stopover: true
}))
const origin = waypoints.shift().location;
const destination = waypoints.pop().location;



const directionsService = new google.maps.DirectionsService();
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: travelMode,
waypoints: waypoints
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result
});
} else {
this.setState({ error: result });
}
}
);
}

render() {
if (this.state.error) {
return <h1>{this.state.error}</h1>;
}
return <DirectionsRenderer directions={this.state.directions} />;
}
}

Here is a demo


对于 React 16.8 或更高版本,MapDirectionsRenderer 可以如下实现(使用 Hooks ):

function MapDirectionsRenderer(props) {
const [directions, setDirections] = useState(null);
const [error, setError] = useState(null);

useEffect(() => {
const { places, travelMode } = props;

const waypoints = places.map(p => ({
location: { lat: p.latitude, lng: p.longitude },
stopover: true
}));
const origin = waypoints.shift().location;
const destination = waypoints.pop().location;

const directionsService = new google.maps.DirectionsService();
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: travelMode,
waypoints: waypoints
},
(result, status) => {
console.log(result)
if (status === google.maps.DirectionsStatus.OK) {
setDirections(result);
} else {
setError(result);
}
}
);
});

if (error) {
return <h1>{error}</h1>;
}
return (
directions && (
<DirectionsRenderer directions={directions} />
)
);
}

关于javascript - 我如何使用 react-google-maps 组件绘制路线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55424790/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com