问题描述
这是用于在谷歌地图上显示车辆运动的 reactjs 代码。 在代码中,对于 path 数组,纬度和经度坐标被指定为硬编码值。 我需要的是,应该如何使用 props 将纬度和经度坐标从另一个组件传递给“path”数组。
import React from "react";
import {
withGoogleMap,withScriptjs,GoogleMap,polyline,Marker,} from "react-google-maps";
class Map extends React.Component {
state = {
progress: [],};
path = [
{ lat: 18.558908,lng: -68.389916 },{ lat: 18.558853,lng: -68.389922 },{ lat: 18.558375,lng: -68.389729 },{ lat: 18.558032,lng: -68.389182 },{ lat: 18.55805,lng: -68.388613 },{ lat: 18.558256,lng: -68.388213 },{ lat: 18.558744,lng: -68.387929 },];
veLocity = 5;
initialDate = new Date();
getdistance = () => {
// seconds between when the component loaded and Now
const differentInTime = (new Date() - this.initialDate) / 1000; // pass to seconds
return differentInTime * this.veLocity; // d = v*t -- thanks Newton!
};
componentDidMount = () => {
this.interval = window.setInterval(this.moveObject,1000);
};
componentwillUnmount = () => {
window.clearInterval(this.interval);
};
moveObject = () => {
const distance = this.getdistance();
if (!distance) {
return;
}
let progress = this.path.filter(
(coordinates) => coordinates.distance < distance
);
const nextLine = this.path.find(
(coordinates) => coordinates.distance > distance
);
if (!nextLine) {
this.setState({ progress });
return; // it's the end!
}
const lastLine = progress[progress.length - 1];
const lastLineLatLng = new window.google.maps.LatLng(
lastLine.lat,lastLine.lng
);
const nextLineLatLng = new window.google.maps.LatLng(
nextLine.lat,nextLine.lng
);
// distance of this line
const totaldistance = nextLine.distance - lastLine.distance;
const percentage = (distance - lastLine.distance) / totaldistance;
const position = window.google.maps.geometry.spherical.interpolate(
lastLineLatLng,nextLineLatLng,percentage
);
progress = progress.concat(position);
this.setState({ progress });
};
componentwillMount = () => {
this.path = this.path.map((coordinates,i,array) => {
if (i === 0) {
return { ...coordinates,distance: 0 }; // it begins here!
}
const { lat: lat1,lng: lng1 } = coordinates;
const latLong1 = new window.google.maps.LatLng(lat1,lng1);
const { lat: lat2,lng: lng2 } = array[0];
const latLong2 = new window.google.maps.LatLng(lat2,lng2);
// in meters:
const distance = window.google.maps.geometry.spherical.computedistanceBetween(
latLong1,latLong2
);
return { ...coordinates,distance };
});
console.log(this.path);
};
render = () => {
return (
<GoogleMap
defaultZoom={16}
defaultCenter={{ lat: 18.559008,lng: -68.388881 }}
>
{this.state.progress && (
<>
<polyline
path={this.state.progress}
options={{ strokeColor: "#FF0000 " }}
/>
<Marker
position={this.state.progress[this.state.progress.length - 1]}
/>
</>
)}
</GoogleMap>
);
};
}
const MapComponent = withScriptjs(withGoogleMap(Map));
export default () => (
<MapComponent
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px`,width: "940px" }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
);
这是来自 json 对象的示例数据,我从其他组件获取。我需要使用 props 将这些数据传递给上面的 path 数组。
[]
0: {lat: 6.8667528,lng: 79.8769134}
1: {lat: 6.8667112,lng: 79.8769667}
2: {lat: 6.8666556,lng: 79.8769856}
3: {lat: 6.8666023,lng: 79.8769823}
4: {lat: 6.8665584,lng: 79.8770412}
5: {lat: 6.8665478,lng: 79.8771573}
6: {lat: 6.8665295,lng: 79.8772695}
7: {lat: 6.8664823,lng: 79.8774434}
8: {lat: 6.8664434,lng: 79.8777684}
9: {lat: 6.8664023,lng: 79.87823}
10: {lat: 6.8663373,lng: 79.8786712}
11: {lat: 6.86628,lng: 79.87902}
12: {lat: 6.8662312,lng: 79.879335}
13: {lat: 6.8662145,lng: 79.8795562}
14: {lat: 6.8662095,lng: 79.879695}
15: {lat: 6.8661978,lng: 79.8797523}
16: {lat: 6.8659873,lng: 79.8798639}
谁能帮我建这个?感谢您的帮助!
解决方法
这是一个 sample code Note: use your own API key for the code to work)
和下面关于我如何实现它的代码片段。在 index.js
中,我将路径数组放在 json 文件中,然后导入 json 文件以用作地图中的元素。然后在我的 Map.js
中,我设置了构造函数(道具)和超级(道具)。我将 react-google-maps <GoogleMap>
放在 render
变量内的 GoogleMapExample
中。然后我在 return
中使用这个变量。在代码的 componentWillMount
函数中,您需要使用 this.props.path.map
从 props 中获取路径的值。
Index.js
import React,{ Component } from "react";
import { render } from "react-dom";
import { withScriptjs } from "react-google-maps";
import Map from "./Map";
import "./style.css";
import jsonPath from "./data.json";
const App = () => {
const MapLoader = withScriptjs(Map);
return (
<MapLoader
path={jsonPath}
googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places"
loadingElement={<div style={{ height: `100%` }} />}
/>
);
};
render(<App />,document.getElementById("root"));
Map.js
import React,{ Component } from "react";
import {
withGoogleMap,GoogleMap,Polyline,Marker
} from "react-google-maps";
class Map extends Component {
constructor(props) {
super(props);
this.state = {
progress: []
};
}
velocity = 5;
initialDate = new Date();
getDistance = () => {
// seconds between when the component loaded and now
const differentInTime = (new Date() - this.initialDate) / 1000; // pass to seconds
return differentInTime * this.velocity; // d = v*t -- thanks Newton!
};
componentDidMount = () => {
this.interval = window.setInterval(this.moveObject,1000);
console.log(this.props.path);
};
componentWillUnmount = () => {
window.clearInterval(this.interval);
};
moveObject = () => {
const distance = this.getDistance();
if (!distance) {
return;
}
let progress = this.path.filter(
coordinates => coordinates.distance < distance
);
const nextLine = this.path.find(
coordinates => coordinates.distance > distance
);
if (!nextLine) {
this.setState({ progress });
return; // it's the end!
}
const lastLine = progress[progress.length - 1];
const lastLineLatLng = new window.google.maps.LatLng(
lastLine.lat,lastLine.lng
);
const nextLineLatLng = new window.google.maps.LatLng(
nextLine.lat,nextLine.lng
);
// distance of this line
const totalDistance = nextLine.distance - lastLine.distance;
const percentage = (distance - lastLine.distance) / totalDistance;
const position = window.google.maps.geometry.spherical.interpolate(
lastLineLatLng,nextLineLatLng,percentage
);
progress = progress.concat(position);
this.setState({ progress });
};
componentWillMount = () => {
this.path = this.props.path.map((coordinates,i,array) => {
if (i === 0) {
return { ...coordinates,distance: 0 }; // it begins here!
}
const { lat: lat1,lng: lng1 } = coordinates;
const latLong1 = new window.google.maps.LatLng(lat1,lng1);
const { lat: lat2,lng: lng2 } = array[0];
const latLong2 = new window.google.maps.LatLng(lat2,lng2);
// in meters:
const distance = window.google.maps.geometry.spherical.computeDistanceBetween(
latLong1,latLong2
);
return { ...coordinates,distance };
});
console.log(this.path);
};
render() {
const GoogleMapExample = withGoogleMap(props => (
<GoogleMap
defaultZoom={16}
defaultCenter={{ lat: 6.8667528,lng: 79.8769134 }}
>
{this.state.progress && (
<>
<Polyline
path={this.state.progress}
options={{ strokeColor: "#FF0000 " }}
/>
<Marker
position={this.state.progress[this.state.progress.length - 1]}
/>
</>
)}
</GoogleMap>
));
return (
<div>
<GoogleMapExample
containerElement={<div style={{ height: `500px`,width: "500px" }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}
}
export default Map;