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

时间:2017-06-14 19:13:45

标签: javascript google-maps reactjs google-maps-api-3 google-maps-markers

Meteor 1.5

中使用React JS

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

使用ES6和JSX格式

遵循文档并能够嵌入地图,但无法添加标记。

这是我的代码:

%ex

2 个答案:

答案 0 :(得分:5)

添加了第一个常量

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}

答案 1 :(得分:2)

我会再次检查你的lat,lng坐标。来自google explaining coordinates

“检查纬度坐标中的第一个数字是否在-90到90之间。”

此外,任何其他错误信息都可以帮助您找到答案。