[英]Adding Multiple Markers To A React Map
I am trying to add multiple markers to my Google Map, but I am unsure of how to start as I am new to React.我正在尝试向我的 Google Map 添加多个标记,但我不确定如何开始,因为我是 React 新手。 I want to create an array of markers and render all of them onto the map.
我想创建一个标记数组并将它们全部渲染到 map 上。 How would I do that?
我该怎么做?
Code so far:到目前为止的代码:
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
const mapStyles = {
width: '100%',
height: '100%'
};
export class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {}
};
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
onClose = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{ lat: 49.166590, lng: -123.133569 }}
>
<Marker
onClick={this.onMarkerClick}
name={''}
/>
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
I see that我看到
<Marker
onClick={this.onMarkerClick}
name={''}
/>
is rendering the marker, but how would I make it into a loop to display an array of markers?正在渲染标记,但我如何将它变成一个循环来显示一组标记?
Welcome to the world of React.欢迎来到 React 的世界。 To render an array of components you can map through your array using array.prototype.map() .
要渲染组件数组,您可以使用array.prototype.map()通过您的数组 map 。 So for example
所以例如
const myArray = ['hello', 'world']
return (
<div>
{myArray.map((element, index) =>
<span key = {index}>{element}</span>}
</div>
)
// equivalent to
// <div>
// <span key = {0}>hello</span>}
// <span key = {1}>world</span>}
// </div>
Note that it is important to provide a unique key
prop to the root node for each element.请注意,为每个元素的根节点提供唯一的
key
prop 很重要。 See this question and this tutorial for more info on rendering arrays.有关渲染 arrays 的更多信息,请参阅此问题和本教程。 Also, see marker documentation
另请参阅标记文档
So for your case , to give an example I just added a markers
array to the render function.因此,对于您的情况,举个例子,我刚刚向渲染 function 添加了一个
markers
数组。
render() {
let markers = [ // Just an example this should probably be in your state or props.
{
name: "marker1",
position: { lat: 49.17655, lng: -123.138564 }
},
{
name: "marker2",
position: { lat: 49.16659, lng: -123.113569 }
},
{
name: "marker3",
position: { lat: 49.15659, lng: -123.143569 }
}
];
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{ lat: 49.16659, lng: -123.133569 }}
>
{markers.map((marker, index) => (
<Marker
key={index} // Need to be unique
onClick={this.onMarkerClick}
name={marker.name}
position={marker.position}
/>
))}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
</div>
</InfoWindow>
</Map>
);
}
Here is a code sandbox example with the markers in the state.这是一个代码沙盒示例,其中包含 state 中的标记。 (just add your maps API key in
maps.js:4
for it to load the maps) (只需在
maps.js:4
中添加您的地图 API 键即可加载地图)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.