如何在谷歌地图上查找用户位置并使用 google-map-react 库关注他们所在的位置

Question

我正在尝试使用 google-map-react 库在 Google 地图上定位用户的当前位置。我设法使用react-geolocated 获取坐标并将它们输入到GoogleMapReact 组件中的纬度和经度道具中，但它远非准确。我现在正在寻找有关如何使用 Google Maps API 获得更准确坐标并专注于用户所在地图区域的替代方法。使用 handleApiLoaded 方法，我不明白如何使用它来实现这一点。

以下是我为尝试解决此问题而编写的一些代码

    import React from "react";
    import GoogleMapReact from "google-map-react";
    import { geolocated } from "react-geolocated";
    import LocateMeButton from "./Button";
    import "./App.css";

    const Marker = () => (
      <img
        src={
          "http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/map-marker-icon.png"
        }
        alt="MyPin"
      />
    );

    const Map = props => {
      const [state, stateUpdater] = React.useState({
        lat: "",
        lng: "",
        text: ""
      });

      const getGeolocationCordinates = () => {
        return !props.isGeolocationAvailable
          ? stateUpdater({ text: "unsupported browser" })
          : !props.isGeolocationEnabled
          ? stateUpdater({ text: "Geolocation not enabled" })
          : props.coords
          ? stateUpdater({
              lng: props.coords.longitude,
              lat: props.coords.latitude
            })
          : "Getting the location";
      };

      return (
        <div className=" map-container">
          <LocateMeButton Click={() => getGeolocationCordinates()} />
          <GoogleMapReact
            bootstrapURLKeys={{
              key: "API_KEY",
              language: "en"
            }}
            yesIWantToUseGoogleMapApiInternals
            defaultCenter={{ lat: 0.3211264, lng: 32.5910528 }}
            defaultZoom={11}
          >
            <Marker lat={state.lat} lng={state.lng} />
          </GoogleMapReact>
        </div>
      );
    };

    export default geolocated({
      positionOptions: {
        enableHighAccuracy: true
      },
      userDecisionTimeout: 5000
    })(Map);


<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<!-- end snippet -->

    import React from "react";
import GoogleMapReact from "google-map-react";
import { geolocated } from "react-geolocated";
import LocateMeButton from "./Button";
import "./App.css";

const Marker = () => (
  <img
    src={
      "http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/map-marker-icon.png"
    }
    alt="MyPin"
  />
);

const Map = props => {
  const [state, stateUpdater] = React.useState({
    lat: "",
    lng: "",
    text: ""
  });

  const getGeolocationCordinates = () => {
    return !props.isGeolocationAvailable
      ? stateUpdater({ text: "unsupported browser" })
      : !props.isGeolocationEnabled
      ? stateUpdater({ text: "Geolocation not enabled" })
      : props.coords
      ? stateUpdater({
          lng: props.coords.longitude,
          lat: props.coords.latitude
        })
      : "Getting the location";
  };

  return (
    <div className=" map-container">
      <LocateMeButton Click={() => getGeolocationCordinates()} />
      <GoogleMapReact
        bootstrapURLKeys={{
          key: "AIzaSyBtgM1mf0N-Pcsko7Dc5Q2La-K460a9IsA",
          language: "en"
        }}
        yesIWantToUseGoogleMapApiInternals
        defaultCenter={{ lat: 0.3211264, lng: 32.5910528 }}
        defaultZoom={11}
      >
        <Marker lat={state.lat} lng={state.lng} />
      </GoogleMapReact>
    </div>
  );
};

export default geolocated({
  positionOptions: {
    enableHighAccuracy: true
  },
  userDecisionTimeout: 5000
})(Map);

Answer 1

我删除了您在问题中包含的 API 密钥。今后，请确保您不会在公共网站上发布您的 API 密钥以保护它。

您可以使用浏览器的 HTML5 地理定位功能以及 Maps JavaScript API 来实现此用例。

这是一个sample code 和下面的代码 sn-p，它在 google-map-react 库中实现了这一点。

import React, { Component } from "react";
import GoogleMapReact from "google-map-react";
import "./style.css";

class GoogleMaps extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentLocation: { lat: 40.756795, lng: -73.954298 }
    };
  }

  render() {
    console.log(this.state.inputRad);
    const apiIsLoaded = (map, maps) => {
      navigator?.geolocation.getCurrentPosition(
        ({ coords: { latitude: lat, longitude: lng } }) => {
          const pos = { lat, lng };
          this.setState({ currentLocation: pos });
        }
      );
    };
    return (
      <div>
        <div style={{ height: "400px", width: "100%" }}>
          <GoogleMapReact
            bootstrapURLKeys={{
              key: "YOUR_API_KEY",
              libraries: ["places"]
            }}
            defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
            defaultZoom={10}
            center={this.state.currentLocation}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)}
          />
        </div>
      </div>
    );
  }
}
export default GoogleMaps;