在 react-google-maps 中动态添加、更新、删除标记
Dynamically add, update, delete markers in react-google-maps
查看有关 react-google-maps 的文档,我能够破解一些代码来渲染具有静态数据的地图。现在我需要根据来自 API 的新数据或定期更新对地图进行更改,并且没有看到任何关于如何执行此操作的讨论。
为了制作初始应用程序,我做了一个 "npx create-react-app xxx" 来创建一个应用程序,然后为 react-google-maps 添加了必要的 npm 包。这是基本代码:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
let markers = []
function createMarkers(numMarkers){
for(let i = 0; i < numMarkers; i++){
markers.push(<Marker key={i} position={{ lat: 45.123 + (i * 0.005), lng: -75.987 }} />)
}
return markers;
}
setInterval(function(){
if(markers.length > 0 && markers[0].props.position){
let marker = markers[0];
//debugger;
let position = marker.props.position;
position.lat = position.lat - 0.005;
position.lng = position.lng - 0.005;
marker.props.position = position;
}
}, 1000)
const MyGreatMap = withScriptjs( withGoogleMap(props => <GoogleMap
defaultZoom={14}
defaultCenter={{ lat: 45.123, lng: -75.978 }}
>
{createMarkers(10)}
</GoogleMap>));
ReactDOM.render(
<MyGreatMap
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDS-TFZqRfUx9xPXTJrPH6eml-gGo-btZ0"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `800px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>,
document.getElementById('root'));
当我更新道具时,没有任何反应。我确定那是错误的,它应该以某种方式更新状态,但标记中的 lat/lng 信息是道具。
在 react-google-maps 中更新内容的最佳方式是什么? Google 地图通常非常 javascript 密集 API 所以我不知道它是否可以工作 "the react way"。对 react-google-maps 进行更改以使它们有效地重新渲染更改的最佳方法是什么?
I'm sure that's wrong and it should be updating state somehow, but the
lat/lng info in the markers are props.
没错,markers
需要移动到 local state,为此可以引入一个组件,它接受 markers
道具作为 初始状态 然后像这样更新状态:
class MapWithMarkers extends React.Component {
constructor(props) {
super(props);
this.state= {markers: this.props.markers}; //1.initialize initial state from props
}
updateMarker() {
this.setState(prevState => {
const markers = [...prevState.markers];
markers[index] = {lat: <val>, lng: <val>};
return {markers};
})
}
componentDidMount() {
this.intervalId = setInterval(this.updateMarker.bind(this), 1000);
}
componentWillUnmount(){
clearInterval(this.intervalId);
}
render() {
return (
<Map center={this.props.center} zoom={this.props.zoom} places={this.state.markers} />
);
}
}
查看有关 react-google-maps 的文档,我能够破解一些代码来渲染具有静态数据的地图。现在我需要根据来自 API 的新数据或定期更新对地图进行更改,并且没有看到任何关于如何执行此操作的讨论。
为了制作初始应用程序,我做了一个 "npx create-react-app xxx" 来创建一个应用程序,然后为 react-google-maps 添加了必要的 npm 包。这是基本代码:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
let markers = []
function createMarkers(numMarkers){
for(let i = 0; i < numMarkers; i++){
markers.push(<Marker key={i} position={{ lat: 45.123 + (i * 0.005), lng: -75.987 }} />)
}
return markers;
}
setInterval(function(){
if(markers.length > 0 && markers[0].props.position){
let marker = markers[0];
//debugger;
let position = marker.props.position;
position.lat = position.lat - 0.005;
position.lng = position.lng - 0.005;
marker.props.position = position;
}
}, 1000)
const MyGreatMap = withScriptjs( withGoogleMap(props => <GoogleMap
defaultZoom={14}
defaultCenter={{ lat: 45.123, lng: -75.978 }}
>
{createMarkers(10)}
</GoogleMap>));
ReactDOM.render(
<MyGreatMap
googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDS-TFZqRfUx9xPXTJrPH6eml-gGo-btZ0"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `800px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>,
document.getElementById('root'));
当我更新道具时,没有任何反应。我确定那是错误的,它应该以某种方式更新状态,但标记中的 lat/lng 信息是道具。
在 react-google-maps 中更新内容的最佳方式是什么? Google 地图通常非常 javascript 密集 API 所以我不知道它是否可以工作 "the react way"。对 react-google-maps 进行更改以使它们有效地重新渲染更改的最佳方法是什么?
I'm sure that's wrong and it should be updating state somehow, but the lat/lng info in the markers are props.
没错,markers
需要移动到 local state,为此可以引入一个组件,它接受 markers
道具作为 初始状态 然后像这样更新状态:
class MapWithMarkers extends React.Component {
constructor(props) {
super(props);
this.state= {markers: this.props.markers}; //1.initialize initial state from props
}
updateMarker() {
this.setState(prevState => {
const markers = [...prevState.markers];
markers[index] = {lat: <val>, lng: <val>};
return {markers};
})
}
componentDidMount() {
this.intervalId = setInterval(this.updateMarker.bind(this), 1000);
}
componentWillUnmount(){
clearInterval(this.intervalId);
}
render() {
return (
<Map center={this.props.center} zoom={this.props.zoom} places={this.state.markers} />
);
}
}