页面加载时获取位置答案

【问题标题】：get location when pages loads页面加载时获取位置
【发布时间】：2012-11-02 11:45:58
【问题描述】：

我正在使用 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>

【问题讨论】：

问题不清楚，请详细说明。
当您打开一个页面时，您可以在代码上方按下一个按钮，然后弹出窗口会询问您该网站是否可以使用您的位置。你说是的。我想错过第一步，所以当您打开网站时，它会直接询问您网站是否可以使用您的位置。只是想错过第一个按钮阶段。

标签： javascript css html geolocation

【解决方案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/

【讨论】：

从 Chrome 版本 50 开始，该站点必须运行 https。

【解决方案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>

【讨论】：

【解决方案3】：

这是对上述答案的更新，适用于任何想要在不添加其他脚本的情况下做出反应的人。这是用于 React 等的 ES2015 格式的代码，无需使用上面的任何 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
            }

然后只需导入函数并使用它

如果您想获取状态和 zip，您可以使用 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
}

【讨论】：