有沒有辦法使用 google-map-react 從這個可拖動標記獲取坐標？

Question

我已經制作了標記，因此它可以在 map 上拖動。不過我正在嘗試從標記中獲取坐標，以便將它們保存到我的數據庫中。 下面是代碼，是否有一個 function，我可以從拖動標記時獲取坐標。 或者我應該使用另一個谷歌地圖反應庫。

import React, {Component, useCallback} from "react";
import GoogleMapReact from "google-map-react";

class Map extends Component {
  loadMap = (map, maps) => {

    let marker = new maps.Marker({
      position: { lat: 40.856795, lng: -73.954298 },
      map,
      draggable: true,

    });
  };
  

  render() {
    return (
      <div style={{ height: "400px", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: "key here" }}
          defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
          defaultZoom={10}
          yesIWantToUseGoogleMapApiInternals
          onGoogleApiLoaded={({ map, maps }) => this.loadMap(map, maps)}

        >
        </GoogleMapReact>
      </div>
    );
  }
}

export default Map;

Answer 1

您正在使用 google api 作為標記，因此您可以使用marker文檔。

具體來說，你應該使用dragend事件

就像是

handleDragEnd = (event) => {
  console.log(event.latLng);
}

loadMap = (map, maps) => {
  let marker = new maps.Marker({
    position: { lat: 40.856795, lng: -73.954298 },
    map,
    draggable: true,
  });
  marker.addListener('dragend', this.handleDragEnd);
};