在 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/