如何在谷歌地图上找到用户的位置，并使用谷歌地图反应库专注于他们所在的位置

Question

我正在尝试使用google-map-react库在谷歌地图上定位用户的当前位置。我设法使用react-geolocated来获取坐标，并将它们输入到GoogleMapReact组件中的纬度和经度道具中，但这远远不够准确。我现在正在寻找一种替代方法，如何使用谷歌地图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来实现此用例。

下面是一个示例代码和代码片段，它在googlemapreact库中实现了这一点。

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;