React.js geo position 在 iPhone/Android 的瀏覽器中不起作用

Question

我正在嘗試在 map 上安裝我的 position，它在我的 Google Chrome 計算機上運行良好，但是當模擬到 android/iPhone 時，例如在 iPhone 模擬器上使用自定義位置時沒有任何反應。 在我的實際 iPhone 上也嘗試過，但沒有任何運氣。 我能找到的所有在模擬器/真實設備上接受位置的設置都是 ON

谷歌地圖.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

地理.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>
    );
};

使用位置.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};
};

有人知道可能出了什么問題嗎？ 謝謝！！

Answer 1

沒關系，如果不是從安全連接中收集，這與位置被阻止有關

Origin 無權使用地理定位服務——甚至超過 HTTPS

通過使用 --https 運行 npm 解決了這個問題