3

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

3 回答 3

5

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

于 2012-11-02T11:53:25.463 回答
0

对于任何想要在不添加其他脚本的情况下做出反应的人来说，这是对上述答案的更新。这是用于 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
}
于 2020-03-28T18:57:58.867 回答
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>
于 2019-11-05T16:42:03.260 回答