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

Posted 2023-02-23

【中文标题】如何在 react-google-maps 中添加标记？

【英文标题】：How to add markers in 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。

【参考方案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= `