将 Google Maps api 与 React js 集成（可拖动的制造商不返回坐标）答案

【问题标题】：Integrating Google Maps api with React js (draggable maker not returning coordinates)将 Google Maps api 与 React js 集成（可拖动的制造商不返回坐标）
【发布时间】：2020-11-16 11:15:05
【问题描述】：

我们目前正在尝试将 google maps javascript api 与表单集成。

我们已经设法让地图正常工作，因此当用户添加他们的地址时会执行查询搜索，但是，我们还希望用户能够将标记拖到实际位置，如果地址在地图。

这是目前为止的代码：

import PropTypes from "prop-types";

const GoogleMap = ({ placeName, address, town, postcode, setLocation }) => {
  const googleMapRef = useRef();
  let googleMap;

  const createGoogleMap = coordinates => {
    googleMap = new window.google.maps.Map(googleMapRef.current, {
      zoom: 16,
      center: {
        lat: coordinates.lat(),
        lng: coordinates.lng(),
      },
      disableDefaultUI: true,
    });
  };

  let marker;

  const getLatLng = () => {
    let lat;
    let lng;
    let placeId;
    new window.google.maps.Geocoder().geocode(
      { address: `${placeName}, ${address}, ${town}, ${postcode}, region:'uk'` },
      (results, status) => {
        if (status === window.google.maps.GeocoderStatus.OK) {
          placeId = results[0].place_id;
          createGoogleMap(results[0].geometry.location);
          lat = results[0].geometry.location.lat();
          lng = results[0].geometry.location.lng();
          setLocation({ latitude: lat, longitude: lng });
          marker = new window.google.maps.Marker({
            position: { lat, lng },
            map: googleMap,
            animation: window.google.maps.Animation.DROP,
            title: `${placeName}`,
            draggable: true,
          });
          marker.addListener("dragend");
          console.log(marker);
        } else {
          console.error(`Geocode was not successful for the following reason: ${status}`);
        }
      },
    );
  };

  useEffect(() => {
    const googleMapScript = document.createElement("script");
    googleMapScript.src = apiKey;
    googleMapScript.async = true;
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener("load", () => {
      getLatLng();
    });
  }, [placeName, postcode, marker]);

  return <div id="google-map" ref={googleMapRef} style={{ width: "100%", height: "60vh" }} />;
};

GoogleMap.defaultProps = {
  placeName: undefined,
  address: undefined,
  town: undefined,
  postcode: undefined,
};

GoogleMap.propTypes = {
  placeName: PropTypes.string,
  address: PropTypes.string,
  town: PropTypes.string,
  postcode: PropTypes.string,
  setLocation: PropTypes.func.isRequired,
};

export default GoogleMap;

在这一点上任何帮助或建议都会很棒。

【问题讨论】：

好像你已经这样做了（draggable: true）。那么现在有什么问题呢？
该道具使标记可拖动，但不会返回放置时的纬度和经度。

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

【解决方案1】：

好的，我设法解决了。这是解决方案：

import React, { useEffect, useRef } from "react";
import PropTypes from "prop-types";
import { error } from "../../../../Utils/toast";

const GoogleMap = ({ placeName, address, town, postcode, setLocation }) => {
  const googleMapRef = useRef();
  let googleMap;

  const createGoogleMap = coordinates => {
    googleMap = new window.google.maps.Map(googleMapRef.current, {
      zoom: 16,
      center: {
        lat: coordinates.lat(),
        lng: coordinates.lng(),
      },
      disableDefaultUI: true,
    });
  };

  let marker;

  function markerCoords(markerobject) {
    window.google.maps.event.addListener(markerobject, "dragend", evt => {
      setLocation({ latitude: evt.latLng.lat(), longitude: evt.latLng.lng() });
    });
  }

  const getLatLng = () => {
    let lat;
    let lng;
    new window.google.maps.Geocoder().geocode(
      { address: `${placeName}, ${address}, ${town}, ${postcode}, region:'uk'` },
      (results, status) => {
        if (status === window.google.maps.GeocoderStatus.OK) {
          createGoogleMap(results[0].geometry.location);
          lat = results[0].geometry.location.lat();
          lng = results[0].geometry.location.lng();
          setLocation({ latitude: lat, longitude: lng });
          marker = new window.google.maps.Marker({
            position: { lat, lng },
            map: googleMap,
            animation: window.google.maps.Animation.DROP,
            title: `${placeName}`,
            draggable: true,
          });
          markerCoords(marker);
        } else {
          error(`Geocode was not successful for the following reason: ${status}`);
        }
      },
    );
  };

  useEffect(() => {
    const googleMapScript = document.createElement("script");
    googleMapScript.src = apiKey;
    googleMapScript.async = true;
    window.document.body.appendChild(googleMapScript);
    googleMapScript.addEventListener("load", () => {
      getLatLng();
    });
  }, [placeName, postcode, marker]);

  return <div id="google-map" ref={googleMapRef} style={{ width: "100%", height: "60vh" }} />;
};

GoogleMap.defaultProps = {
  placeName: undefined,
  address: undefined,
  town: undefined,
  postcode: undefined,
};

GoogleMap.propTypes = {
  placeName: PropTypes.string,
  address: PropTypes.string,
  town: PropTypes.string,
  postcode: PropTypes.string,
  setLocation: PropTypes.func.isRequired,
};

export default GoogleMap;

【讨论】：