React JS in Meteor 1.5
質問: react)を使用してマーカーを追加する方法が必要です-google-maps
ES6を使用してJSX形式で
ドキュメントに従い、地図を埋め込むことはできましたが、マーカーを追加することはできませんでした。
これが私のコードです:
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}