当我们使用 PC 浏览器时，如何在手机浏览器上获取位置数据答案

【问题标题】：How to get location data on phones browser as we get on pc browser当我们使用 PC 浏览器时，如何在手机浏览器上获取位置数据
【发布时间】：2021-03-19 01:25:59
【问题描述】：

我正在做一个项目，我正在制作一个 Web 应用程序来获取您所在位置的天气预报。
但我遇到了一个问题，它在 pc/台式机中支持
但不是手机

所以，我需要你的帮助

这是我目前在 pc/台式机中支持的代码：-

<!DOCTYPE html>
<html>
    <head>
        <title>Weather Report</title>
    </head>
    <body>
        <h1>Weather Report Of your location</h1>
        <hr>
        <p id="location"></p>
        <p id="data"></p>
        <script>
            var data_of_Lat_Lon = document.getElementById("location");
            var data = document.getElementById("data");
            var Latitude;
            var Longitude;
            var key = "-------------------------------";<!--put your key-->
            var url = "http://api.openweathermap.org/data/2.5/weather?";

            function getLocation(){
                if(navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(showPosition);
                }
                else{
                    data_of_Lat_Lon.innerHTML="Geolocation is not supported by this browser. SORRY!";
                }
            }

            function showPosition(position){
                data_of_Lat_Lon.innerHTML=("Latitude: "+position.coords.latitude+
                "<br>Longitude: "+position.coords.longitude);
                
                Latitude = position.coords.latitude;
                Longitude = position.coords.longitude;

                getData(Latitude,Longitude);
            }

            function getData(Lat,Lon){
                const readyToSent = (url+"lat="+Lat+"&lon="+Lon+"&appid="+key);   
                fetch(readyToSent)
                .then(response=>response.json())
                .then(data=>{
                    console.log(data);
                    fetchData(data)
                })
            }

            function fetchData(data){
                document.getElementById("data").innerHTML =
                    "The weather report of your Location is :-<br>"+
                    "Location:-<br>"+
                    "Country :"+data.sys.country+
                    "<br>Local Area Name :"+data.name+
                    "<br>Temp. :"+data.main.temp+
                    "<br>But You will feel like :"+data.main.feels_like+
                    "<br>Min. Temp. :"+data.main.temp_min+
                    "<br>Max. Temp. :"+data.main.temp_max+
                    "<br>Pressure :"+data.main.pressure+
                    "<br>Humidity :"+data.main.humidity+
                    "<br>Weather :"+data.weather[0].description
            }
            getLocation();
            showPosition();
            getData();
        </script>
        <hr>
        <p>Made By:- Sukarna Jana</p>
    </body>
</html>

请解决我的问题，为什么它不能在手机上运行。\

感谢您抽出宝贵的时间

【问题讨论】：

标签： javascript html web location

【解决方案1】：

这可能是因为您没有在 HTTPS 位置托管网站。您可以尝试在移动设备上的 chrome 标志中开启将来源视为安全。

chrome://flags/#unsafely-treat-insecure-origin-as-secure

对于 iOS，您需要使用 HTTPS。

（如果不是这种情况，则可能会在手机上关闭定位服务）

【讨论】：

我刚刚检查了它是否可以在其他手机浏览器上运行，但不能在手机 chrome 浏览器上运行...但它可以在计算机 Chrome 上顺利运行...如果您能详细说明并解释一下，那就是真的很棒很饱。对不起
您的网站是 HTTPS 吗？还是 HTTP？（访问页面时左上角是否有挂锁）
我正在调用一个 API 来从 OpenWeatherMap 获取天气报告的 JSON 文件，所以它是 http
你说的解决不了问题的方法还是一样。对不起...但我很感激你挺身而出帮助我。谢谢
如果是 HTTP，抱歉，navigator.geolocation.getCurrentPosition() 不适用于 HTTP 源。这是一项安全功能，您需要切换到 HTTPS。 developer.mozilla.org/en-US/docs/Web/API/Geolocation_API