页面加载时获取位置

Question

页面加载时获取位置

4

我正在使用HTML、CSS和JavaScript构建网站。我希望在页面加载时获取用户的位置，以便他们无需按按钮。我希望有人能帮助我。

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

- Stuart Eggleton

问题不清楚，请详细说明。 - Mansoor Jafar

在打开页面时，您会看到一个按钮，点击后将弹出一个窗口询问是否允许网站使用您的位置信息。您可以选择“是”。我想省略第一步，这样当您打开网站时，它就直接询问您是否允许使用您的位置信息，而不需要再点击按钮。我只想跳过第一阶段的按钮。 - Stuart Eggleton

3个回答

0

这是对上面答案的更新，适用于想在React中完成此操作而不添加其他脚本的人。以下是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地理定位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
}

- Josh

0

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

- simao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Avin Varghese · Accepted Answer

只需调用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>

Fiddle : https://jsfiddle.net/ES4TF/