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 中存储访问令牌的位置?

React.js & Flux - 在哪里注册 Websocket 事件(接收数据)的最佳位置

如何在 mui-datatable React.js 的第一个位置添加 SrNo (#) 列

React JS 应用程序的浏览器中出现“用户不允许访问 Windows 位置”错误

使用三个 JS 和 React JS 加载 GLTF 模型

如何在React.js中显示模态滚动到顶部