如何使用 react-google-maps 通过单击在地图上添加标记？

Posted 2023-02-23

【中文标题】如何使用 react-google-maps 通过单击在地图上添加标记？

【英文标题】：How to add marker on map by Click using react-google-maps?

【发布时间】：2018-08-22 19:25:29

【问题描述】：

我正在努力寻找一个非常简单的示例，说明当用户使用基于组件的 React-google-maps 在地图上单击鼠标左键时如何向 Google 地图添加标记。需要帮助。

const Map = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom=8
    defaultCenter= lat: -34.397, lng: 150.644 
    onClick = props.onMapClick
   >
  props.isMarkerShown && <Marker position=props.markerPosition />

 </GoogleMap>
))

export default class MapContainer extends React.Component 
  constructor (props) 
    super(props)
    this.state = 

   
 

render () 
  return (
  <div style=height: '100%'>
    <Map
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
      loadingElement=<div style= height: `100%`  />
      containerElement=<div style= height: `400px`  />
      mapElement=<div style= height: `100%`  />
      placeMarker=this.placeMarker
    />
  </div>
)
 
 

【参考方案1】：

这是一个通用示例，演示如何在地图点击时显示标记：

const Map = compose(
    withStateHandlers(() => (
        isMarkerShown: false,
        markerPosition: null
      ), 
        onMapClick: ( isMarkerShown ) => (e) => (
            markerPosition: e.latLng,
            isMarkerShown:true
        )
      ),
    withScriptjs,
    withGoogleMap
)
    (props =>
        <GoogleMap
            defaultZoom=8
            defaultCenter= lat: -34.397, lng: 150.644 
            onClick=props.onMapClick
        >
            props.isMarkerShown && <Marker position=props.markerPosition />

        </GoogleMap>
    )

export default class MapContainer extends React.Component 
    constructor(props) 
        super(props)
    

    render() 
        return (
            <div style= height: '100%' >
                <Map
                    googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
                    loadingElement=<div style= height: `100%`  />
                    containerElement=<div style= height: `400px`  />
                    mapElement=<div style= height: `100%`  />
                />
            </div>
        )
    

Live demo

【讨论】：

e.latLng 的 Marker 是一个函数。如果我想访问latLng.lat 本身，我该怎么做。例如，如果我想在屏幕上渲染 Lat 和 lng，我该怎么做？

并给自己一个答案（以及所有感兴趣的人）e.latLng.lat().toFixed(3) 成功

【参考方案2】：

使用添加标记的编辑版本检查此代码

const InitialMap = withGoogleMap(props => 
  var index = this.marker.index || [];

  return(
    <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>
  )
);

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:"150px"/>
          
          mapElement=
            <div style=height:"150px" />
          
          markers=this.state.markers />
      </div>
    )
  
    

【讨论】：

嗨@Arthi，地图点击函数在哪里

@Van 你能检查一下这个参考吗***.com/questions/43937887/…