在Meteor 1.5中使用React JS
问题 :需要一种使用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}