如何在 react-google-maps 中添加标记？答案

【问题标题】：How to add markers in react-google-maps?如何在 react-google-maps 中添加标记？
【发布时间】：2017-11-17 02:04:45
【问题描述】：

在Meteor 1.5 中使用 React JS

问题：需要一种方法来添加 Marker 使用 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>
    )
  }
}

【问题讨论】：

有相同问题的朋友请关注作者提供的demo。

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

【解决方案1】：

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

"检查您的纬度坐标中的第一个数字是否在 -90 和 90 之间。"

任何其他错误信息也将有助于为您找到答案。

【讨论】：

谢谢！在我按照作者提供的演示进行操作后，标记也可以正常工作。如果你也知道使用 React 的图标大小，请告诉我。
你的坐标是对的，我的坐标是错的。
增大了标记大小并开始工作。 Issue Resolved 别忘了在中添加 Google Script

【解决方案2】：

添加了第一个常量

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}

【讨论】：

你可以让它使用百分比而不是像这样的像素：` containerElement={
} mapElement={
}`