[英]Adding Multiple Markers To A React Map
我正在嘗試向我的 Google Map 添加多個標記,但我不確定如何開始,因為我是 React 新手。 我想創建一個標記數組並將它們全部渲染到 map 上。 我該怎么做?
到目前為止的代碼:
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>
);
}
}
我看到
<Marker
onClick={this.onMarkerClick}
name={''}
/>
正在渲染標記,但我如何將它變成一個循環來顯示一組標記?
歡迎來到 React 的世界。 要渲染組件數組,您可以使用array.prototype.map()通過您的數組 map 。 所以例如
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>
請注意,為每個元素的根節點提供唯一的key
prop 很重要。 有關渲染 arrays 的更多信息,請參閱此問題和本教程。 另請參閱標記文檔
因此,對於您的情況,舉個例子,我剛剛向渲染 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>
);
}
這是一個代碼沙盒示例,其中包含 state 中的標記。 (只需在maps.js:4
中添加您的地圖 API 鍵即可加載地圖)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.