Question

我正在构建一个使用HTML，CSS和Java脚本的网站。我想在页面加载时获取用户的位置。所以他们不需要按一下按钮。我希望有人可以提供帮助。

!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation(){
 if (navigator.geolocation){
   navigator.geolocation.getCurrentPosition(showPosition);
 }
 else{
   x.innerHTML="Geolocation is not supported by this browser.";}
 }

function showPosition(position){
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;    
 }
</script>
</body>
</html>

Answer 1

只需拨打 getLocation()

即可

<script>
        var x=document.getElementById("demo");
        function getLocation()
         {
        if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }
        else{x.innerHTML="Geolocation is not supported by this browser.";}
        }
        function showPosition(position)
        {
        x.innerHTML="Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;  
        }
        getLocation()
        </script>

小提琴：https://jsfiddle.net/ES4TF/

Answer 2

<p id="demo"></p>
<script>
 var x=document.getElementById("demo");
        function getLocation()
         {
        if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }
        else{x.innerHTML="Geolocation is not supported by this browser.";}
        }
        function showPosition(position)
        {
        x.innerHTML="Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;  
        }
        getLocation()
</script>

Answer 3

这是对以上答案的更新，适用于任何希望在不添加其他脚本的情况下进行此操作的人。这是ES2015格式的代码，可与React等配合使用，而无需使用上述任何HTML内容。只需导入功能。特别鸣谢，因为我的第一篇文章就是基于它发布的。

        const showPosition = position =>{
              let loc = `Latitude:${position.coords.latitude}  logitude: 
              ${position.coords.longitude}`
               console.log(loc)
               return loc
             }

            const getLocation =  () => {
            if (navigator.geolocation) {
               return navigator.geolocation.getCurrentPosition(showPosition);
              }
              return false
            }

然后只需导入功能并使用

如果要获取状态和邮政编码，可以使用google API。这是获取地理位置并发送给Google的代码，然后为您提供状态，地址结果。您将需要激活google geolocation API。

//Docs - https://developers.google.com/maps/documentation/geocoding/intro#ReverseGeocoding


  const getData = async (url) => {
         let res = await fetch(url)
         let json = await res.json()
         console.log(json);
         return json
         }

 const showPosition = async position =>{
        let loc = `Latitude:${position.coords.latitude}  logitude: ${position.coords.longitude}`
        let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${position.coords.latitude},${position.coords.longitude}&key={GOOGLE_API_key}`
        console.log(loc)

        let address = await getData(url)
        console.log(`results`,address)
        return address
        }

 const getLocation = async () => {
  if (navigator.geolocation) {
     return navigator.geolocation.getCurrentPosition(showPosition);
    }
   return false
}

页面加载时获取位置

3 个答案: