React.js 地理位置在 iPhone/Android 上的浏览器中不起作用
Posted
技术标签:
【中文标题】React.js 地理位置在 iPhone/Android 上的浏览器中不起作用【英文标题】:React.js geo position not working in browser on iPhone/Android 【发布时间】:2021-05-12 07:43:46 【问题描述】:我正在尝试在地图上获取我的位置,它在我的计算机上的 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" /></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, onError, settings);
return () => watcher && navigator.geolocation.clearWatch(watcher);
, [
settings.enableHighAccuracy,
settings.timeout,
settings.maximumAge,
]);
return ...position, error;
;
有人知道可能是什么问题吗? 谢谢!!
【问题讨论】:
【参考方案1】:没关系,如果不是从安全连接中收集,这与位置被阻止有关
Origin does not have permission to use Geolocation service -- even over HTTPS
通过使用 --https 运行 npm 解决了这个问题
【讨论】:
以上是关于React.js 地理位置在 iPhone/Android 上的浏览器中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
React.js & Flux - 在哪里注册 Websocket 事件(接收数据)的最佳位置
如何在 mui-datatable React.js 的第一个位置添加 SrNo (#) 列