如何解决React.js 地理位置在 iPhone/Android 浏览器中不起作用
我正在尝试在地图上获取我的位置,它在我的计算机上的 Google Chrome 浏览器上运行良好,但是当模拟到 android/iPhone 时,例如在 iPhone 模拟器上使用自定义位置时没有任何反应。在我的实际 iPhone 上也尝试过,但没有任何运气。 我能在模拟器/真实设备上找到的所有接受位置的设置都处于开启状态
GoogleMap.js
import React from 'react'
import GoogleMapReact from 'google-map-react'
import {usePosition} from "./usePosition";
const defaultProps = {
center: {
lat: 10.0000000,lng: 12.0000000,},zoom: 18.7,}
const MeOnMap = ({ text }) => <div className="me-on-map"><img src="static/walking.gif" width="30" /></div>
const GoogleMap = () => {
const { latitude,longitude} = usePosition();
return (
<div style={{ marginLeft: '-17px',height: '528px',width: '109%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: '*********' }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
yesIWantToUseGoogleMapApiInternals
options={{ scrollwheel: false,zoomControl: false,fullscreenControl: false,gestureHandling: 'none',styles: [{ stylers: [{ 'saturation': 100 },{ 'gamma': 0.5 }]}] }}
>
<MeOnMap
lat={latitude}
lng={longitude}
text={''}
/>
</GoogleMapReact>
</div>
)}
export default GoogleMap
geo.js
import React from 'react';
import {usePosition} from './usePosition';
export const UsePositions = () => {
const {latitude,longitude} = usePosition();
return (
<code>
My position,<br/>
latitude: {latitude}<br/>
longitude: {longitude}<br/>
</code>
);
};
usePosition.js
import {useState,useEffect} from 'react';
const defaultSettings = {
enableHighAccuracy: false,timeout: Infinity,maximumAge: 0,};
export const usePosition = (watch = false,settings = defaultSettings) => {
const [position,setPosition] = useState({});
const [error,setError] = useState(null);
const onChange = ({coords,timestamp}) => {
setPosition({
latitude: coords.latitude,longitude: coords.longitude,accuracy: coords.accuracy,speed: coords.speed,timestamp,});
};
const onError = (error) => {
setError(error.message);
};
useEffect(() => {
if (!navigator || !navigator.geolocation) {
setError('Geolocation is not supported');
return;
}
let watcher = null;
if (watch) {
watcher =
navigator.geolocation.watchPosition(onChange,onError,settings);
} else {
navigator.geolocation.getCurrentPosition(onChange,settings);
}
return () => watcher && navigator.geolocation.clearWatch(watcher);
},[
settings.enableHighAccuracy,settings.timeout,settings.maximumAge,]);
return {...position,error};
};
有人知道哪里出了问题吗? 谢谢!!
解决方法
没关系,如果不是从安全连接收集到的位置被阻止
Origin does not have permission to use Geolocation service -- even over HTTPS
通过使用 --https 运行 npm 解决了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。