lundi 7 décembre 2020

How to get location data on phones browser as we get on pc browser

I Was working on a project where I was making a web application to get a weather report of your location.
but i ran into an issue that it is supporting in pc/desktop computer
but not phones

So, I need your help

this is my present code which supports in pc/desktop computer:-

<!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>

please troubleshoot my issue that why it is not working at phones.\

THANK YOU, FOR GIVING YOUR PRECIOUS TIME




Aucun commentaire:

Enregistrer un commentaire