如何使用google-maps-react API点击地图显示标记并获取坐标

你的问题在于mapClicked函数的写法不对——React组件里不能通过事件处理函数直接返回组件来渲染，应该通过**状态（state）**来控制标记的显示和位置。下面是修改后的完整代码，附带关键部分的说明：

import React, { Component } from "react";
import { Map, Marker, GoogleApiWrapper } from 'google-maps-react'

class MapContainer extends Component {
  // 初始化状态，保存标记的位置
  state = {
    markerPosition: {
      lat: 37.663626,
      lng: -122.106001
    } // 初始显示中心位置的标记
  };

  mapClicked = (mapProps, map, clickEvent) => {
    // 从点击事件中获取坐标
    const lat = clickEvent.latLng.lat();
    const lng = clickEvent.latLng.lng();
    
    // 更新状态，触发重新渲染
    this.setState({
      markerPosition: { lat, lng }
    });

    // 这里可以直接使用lat和lng，比如打印或者发送到后端
    console.log("点击的坐标：", lat, lng);
  };

  render() {
    return (
      <Map 
        google={this.props.google}
        onClick={this.mapClicked}
        style={{ width: "100%", height: "100%" }}
        zoom={10}
        initialCenter={{
          lat: 37.663626,
          lng: -122.106001
        }}
      >
        {/* 根据状态渲染标记 */}
        {this.state.markerPosition && (
          <Marker
            position={this.state.markerPosition}
            name={'点击的位置'}
          />
        )}
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'HIDDEN'
})(MapContainer)

关键修改点： #

1. 添加状态管理：用state保存标记的位置，初始值设为地图的初始中心，确保加载时显示标记。
2. 修改mapClicked函数：
   • 从clickEvent.latLng中提取点击位置的经纬度（lat()和lng()方法）。
   • 调用this.setState更新标记位置，触发组件重新渲染。
   • 这里可以直接获取坐标做后续处理（比如打印、存储）。
3. 渲染标记：在Map组件内部，根据state.markerPosition是否存在来渲染Marker，同时修正了你代码里的拼写错误（postition → position）。

这样修改后，点击地图任意位置，标记就会移动到对应位置，同时控制台会输出点击的坐标。

内容的提问来源于stack exchange，提问作者Maaz Adil