如何获取 google-maps-react 中的所有标记
How to get all markers in google-maps-react
我的项目中有 google-maps-react
,但我不知道如何从地图上获取所有标记?
import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import "../Body/Map.css";
import marker_icon from "../../img/marker_icon.png";
import hover_icon from "../../img/hover_icon.png";
import { Grid, Row, Col } from "react-bootstrap";
/*global google*/
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {}
};
}
onMarkerClick = (props, marker, e) => {
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
};
onMapClicked = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
addMarker = (mapProps, map) => {
var marker = new google.maps.Marker({
position: {},
map: map
});
};
render() {
const google = window.google;
const data = this.props.data;
return (
<div className="map-container">
<Map
google={this.props.google}
className={"map"}
zoom={1}
onClick={this.onMapClicked}
onReady={this.addMarker}
>
{data.map(item => (
<Marker
key={item.id}
title={item.name}
name={item.name}
position={{ lat: item.lat, lng: item.lng }}
onClick={this.onMarkerClick}
/>
))}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
>
<div className="info">
<h1>{this.state.selectedPlace.name}</h1>
</div>
</InfoWindow>
</Map>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: "AIzaSyDLgdweTnvhPnUE5yzdxcMeK876cFtMaSk"
})(MapContainer);
您可能打算访问 google.maps.Marker
个对象,如果是这样,您可以考虑利用 Callback Refs:
1) 分配 ref
属性以存储对 Marker
节点的引用:
<Marker ref={this.onMarkerMounted}
key={item.id}
title={item.name}
name={item.name}
position={{ lat: item.lat, lng: item.lng }}
/>
2) 将标记实例保存到 markerObjects
数组中:
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
markerObjects: []
};
this.onMarkerMounted = element => {
this.setState(prevState => ({
markerObjects: [...prevState.markerObjects, element.marker]
}))
};
}
render() {
const google = window.google;
const data = this.props.data;
return (
<div className="map-container">
<Map
google={this.props.google}
className={"map"}
zoom={4}
defaultCenter={{ lat: -35.0317893, lng: 125.219989 }}
position={{ lat: -35.0317893, lng: 125.219989 }}
>
{data.map(item => (
<Marker ref={this.onMarkerMounted}
key={item.id}
title={item.name}
name={item.name}
position={{ lat: item.lat, lng: item.lng }}
/>
))}
</Map>
</div>
);
}
}
我遇到了类似的问题。我想删除所有旧标记并添加新标记列表。这是我修复它的代码:
const MyMap = (props) => {
const [markers, setMarkers] = React.useState([])
React.useEffect(() => {
var markerArr = []
points.map(p => {
markerArr.push(<Marker position={{lat: p.lat, lng: p.lng}} />)
}
)
setMarkers(markerArr)
}, [])
const MarkerUpdater = (day) => {
var markerArr = []
points.map(p => {
markerArr.push(
<Marker position={{lat: p.lat, lng: p.lng}} />
)
}
)
setMarkers(markerArr)
}
return <Map> {markers} </Map>
}
注意
你应该在任何你想更新标记的地方调用 MarkerUpdater
我的项目中有 google-maps-react
,但我不知道如何从地图上获取所有标记?
import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import "../Body/Map.css";
import marker_icon from "../../img/marker_icon.png";
import hover_icon from "../../img/hover_icon.png";
import { Grid, Row, Col } from "react-bootstrap";
/*global google*/
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {}
};
}
onMarkerClick = (props, marker, e) => {
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
};
onMapClicked = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
addMarker = (mapProps, map) => {
var marker = new google.maps.Marker({
position: {},
map: map
});
};
render() {
const google = window.google;
const data = this.props.data;
return (
<div className="map-container">
<Map
google={this.props.google}
className={"map"}
zoom={1}
onClick={this.onMapClicked}
onReady={this.addMarker}
>
{data.map(item => (
<Marker
key={item.id}
title={item.name}
name={item.name}
position={{ lat: item.lat, lng: item.lng }}
onClick={this.onMarkerClick}
/>
))}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
>
<div className="info">
<h1>{this.state.selectedPlace.name}</h1>
</div>
</InfoWindow>
</Map>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: "AIzaSyDLgdweTnvhPnUE5yzdxcMeK876cFtMaSk"
})(MapContainer);
您可能打算访问 google.maps.Marker
个对象,如果是这样,您可以考虑利用 Callback Refs:
1) 分配 ref
属性以存储对 Marker
节点的引用:
<Marker ref={this.onMarkerMounted}
key={item.id}
title={item.name}
name={item.name}
position={{ lat: item.lat, lng: item.lng }}
/>
2) 将标记实例保存到 markerObjects
数组中:
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
markerObjects: []
};
this.onMarkerMounted = element => {
this.setState(prevState => ({
markerObjects: [...prevState.markerObjects, element.marker]
}))
};
}
render() {
const google = window.google;
const data = this.props.data;
return (
<div className="map-container">
<Map
google={this.props.google}
className={"map"}
zoom={4}
defaultCenter={{ lat: -35.0317893, lng: 125.219989 }}
position={{ lat: -35.0317893, lng: 125.219989 }}
>
{data.map(item => (
<Marker ref={this.onMarkerMounted}
key={item.id}
title={item.name}
name={item.name}
position={{ lat: item.lat, lng: item.lng }}
/>
))}
</Map>
</div>
);
}
}
我遇到了类似的问题。我想删除所有旧标记并添加新标记列表。这是我修复它的代码:
const MyMap = (props) => {
const [markers, setMarkers] = React.useState([])
React.useEffect(() => {
var markerArr = []
points.map(p => {
markerArr.push(<Marker position={{lat: p.lat, lng: p.lng}} />)
}
)
setMarkers(markerArr)
}, [])
const MarkerUpdater = (day) => {
var markerArr = []
points.map(p => {
markerArr.push(
<Marker position={{lat: p.lat, lng: p.lng}} />
)
}
)
setMarkers(markerArr)
}
return <Map> {markers} </Map>
}
注意
你应该在任何你想更新标记的地方调用 MarkerUpdater