html获取地理位置

最新推荐文章于 2023-02-25 22:56:31 发布

洛鲟

最新推荐文章于 2023-02-25 22:56:31 发布

阅读量2.5k

点赞数 1

分类专栏： Web

本文链接：https://blog.csdn.net/qq_45984664/article/details/109707315

版权

Web 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

先上代码：

<!DOCTYPE html>
<html>
     
    <head> 
        <meta charset="utf-8"> 
            <title>获取地理信息(slow)</title> </head>
     
    <body>
        <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
        <button onclick="getLocation()">点我</button>
        <script>
            var x = document.getElementById("demo");
 
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                } else {
                    x.innerHTML = "该浏览器不支持获取地理位置。";
                }
            }
 
            function showPosition(position) {
                x.innerHTML = "纬度: " + position.coords.latitude +
                    "<br>经度: " + position.coords.longitude;
            }
        </script>
    </body>
 
</html>

successCallback: 表示获取到的用户数据位置。
该对象包含两个属性：coords和timestamp
coords属性包含七个值，
accuracy：精确度，
latitude：纬度，
longitude：经度，
altitude：海拔，
altitudeAcuracy：海拔高度的精确度，
heading：朝向，
speed：速度

errorCallback: 返回的错误代码。
包含两个属性：message：错误信息，code：错误代码
错误代码包含四个值：
unknow_error: 表示不包括在其他错误代码中的错误，可以在message中查找信息。
permission_denied: 表示用户拒绝浏览器获取位置信息的请求。
position unavalablf: 表示网络不可用或者连接不到卫星。
timeout: 表示获取超时时。
必须在options中指定了timeout值时才有可能发生这种错误。

PositionOptions: 数据格式为json，有3个属性
enableHighAcuracy:布尔值，表示是否启用高精确度模式，如果启用这个模式，浏览器在获取位置信息时可能需要耗费更多的时间。
Timeout: 整数，表示浏览器需要在指定的时间内获取位置信息，否则触发errorCallback
maximumAge: 整数/常量，表示浏览器重新获取位置信息的时间间隔

Navigator.geolocation 只读属性返回一个 Geolocation 对象,通过这个对象可以访问到设备的位置信息。使网站或应用可以根据用户的位置提供个性化结果

chrome：兼容性

浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Navigator.geolocation 只读属性返回一个 Geolocation 对象，通过这个对象可以访问到设备的位置信息。使网站或应用可以根据用户的位置提供个性化结果。

注意: 出于安全考虑，当网页请求获取用户位置信息时，用户会被提示进行授权。注意不同浏览器在请求权限时有不同的策略和方式。Windows10在未开启定位的情况下无法获取位置

语法

geo = navigator.geolocation

例：

getCurrentPosition()
watchPosition()
clearWatch()

附：使用方法：position.address.city，具体如下：

QueryInterface：function QueryInterface() { [native code] }
streetNumber：200号
street：人民大道
premises：null
city：上海市
county：null
region：上海市
country：中国
countryCode：CN
postalCode：null
getInterfaces：function getInterfaces() { [native code] }
getHelperForLanguage：function getHelperForLanguage() { [native code] }
contractID：null
classDescription：null
classID：null
implementationLanguage：2
flags：8
SINGLETON：1
THREADSAFE：2
MAIN_THREAD_ONLY：4
DOM_OBJECT：8
PLUGIN_OBJECT：16
CONTENT_NODE：64
RESERVED：2147483648

全文示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>suke geography address</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(showPosition);
	}
	else
	{
		x.innerHTML="该浏览器不支持获取地理位置。";
	}
}

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

点我

洛鲟

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
html获取地理位置

先上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>获取地理信息(slow)</title> </head> <body> <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
复制链接

扫一扫