Как найти местоположение пользователя на карте Google и сосредоточиться на том, где он находится, используя библиотеку Google-Map-реагировать - PullRequest
Новая
       18

Как найти местоположение пользователя на карте Google и сосредоточиться на том, где он находится, используя библиотеку Google-Map-реагировать

0 голосов
/ 02 апреля 2020

Я пытаюсь использовать библиотеку google-map-react, чтобы найти текущее местоположение пользователя на Картах Google. Мне удалось использовать react-geolocated для получения координат и подачи их в реквизиты широты и долготы в компоненте GoogleMapReact, но это было очень далеко от точности. Сейчас я ищу альтернативу тому, как использовать API Карт Google, чтобы получить более точные координаты и сосредоточиться на области на карте, где находится пользователь. Используя метод 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: "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);


<!-- 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);
...