如何在react-google-maps中添加标记? [英] How to add markers in react-google-maps?
本文介绍了如何在react-google-maps中添加标记?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问题:需要一种使用以下方法添加标记的方法 react-google-maps
Question: Need a way to add Marker using react-google-maps
使用ES6和JSX格式
Using ES6 and in JSX format
按照文档进行操作,能够嵌入地图,但无法添加标记.
Followed the documentation and was able to get the map embedded in, but not able to add the marker.
这是我的代码:
const InitialMap = withGoogleMap(props => {
var index = this.marker.index || [];
return(
<GoogleMap
ref={props.onMapLoad}
defaultZoom={14}
defaultCenter={{lat: 40.6944, lng:-73.9213}}
>
<Marker
key={index}
position={marker.position}
onClick={() => props.onMarkerClick(marker)}
/>
</GoogleMap>
)
});
export default class MapContainer extends Component{
constructor(props){
this.state = {
markers:[{
position:{
lat: 255.0112183,
lng:121.52067570000001,
}
}]
}
}
render(){
return(
<div style={{height:"100%"}}>
<InitialMap
containerElement={
<div style={{height:"100%"}}/>
}
mapElement={
<div style={{height:"100%"}} />
}
markers={this.state.markers} />
</div>
)
}
}
推荐答案
添加了第一个常量
const GettingStartedGoogleMap = withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
zoom={13}
center={{ lat: 21.178574, lng: 72.814149 }}
onClick={props.onMapClick}
>
{props.markers.map(marker => (
<Marker
{...marker}
onRightClick={() => props.onMarkerRightClick(marker)}
/>
))}
</GoogleMap>
将containerElement大小和mapElement大小更改为像素,而不是百分比
Changed the containerElement size and mapElement size to pixels instead of percentage
containerElement={
<div style={{ height: `150px` }} />
}
mapElement={
<div style={{ height: `150px` }} />
}
然后将标记添加到被调用的函数中
And just adding marker to the function which was called
markers={this.state.markers}
这篇关于如何在react-google-maps中添加标记?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文