gpt4 book ai didi

javascript - 如何在 react-google-maps 中添加标记?

转载 作者:数据小太阳 更新时间:2023-10-29 05:11:39 24 4
gpt4 key购买 nike

Meteor 1.5 中使用 React JS

问题:需要一种方法来添加标记使用 react-google-maps

使用 ES6 和 JSX 格式

按照文档进行操作并能够嵌入 map ,但无法添加标记。

这是我的代码:

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 大小更改为像素而不是百分比

  containerElement={
<div style={{ height: `150px` }} />
}
mapElement={
<div style={{ height: `150px` }} />
}

只需在调用的函数中添加标记

markers={this.state.markers}

关于javascript - 如何在 react-google-maps 中添加标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44552917/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com