页面加载时获取位置
Posted
技术标签:
【中文标题】页面加载时获取位置【英文标题】：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>
【问题讨论】：
问题不清楚，请详细说明。 当您打开一个页面时，您可以在代码上方按下一个按钮，然后弹出窗口会询问您该网站是否可以使用您的位置。你说是的。我想错过第一步，所以当您打开网站时，它会直接询问您网站是否可以使用您的位置。只是想错过第一个按钮阶段。 【参考方案1】：只需拨打getLocation()
<script>
var x=document.getElementById("demo");
function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition);
elsex.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);
elsex.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
【讨论】：
以上是关于页面加载时获取位置的主要内容，如果未能解决你的问题，请参考以下文章
html5获取地理位置，如果用户拒绝了，之后每次加载都提示:拒绝获取地理位置，如何获取权限:如果用