初步定位函数学习
谷歌浏览器无法获取经纬度
IE不支持此函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 检查html5是否浏览器支持类库 -->
<script src="modernizr.custom.67796.js"></script>
</head>
<body>
<div id="app"></div>
<button onclick="getLocation()">获取位置信息</button>
</body>
<script>
let div = document.getElementById("app")
function getLocation() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(showMap,showError)//第一个为回调函数,第二个为错误类型
//navigator.geolocation.watchPosition(showPosition) 持续获得用户位置,停止时调用clearWatch()方法
}
else {
alert("浏览器不支持")
}
}
function showMap(position) {//需要position对象做参数
let x = position.coords.latitude
let y = position.coords.longitude
console.log(x, y)
div.innerHTML = "纬度:" + x + "," + "经度:" + y
}
function showError(error) {
switch (error.code) {
case 1:
x.innerHTML = "用户拒绝对获取地理位置的请求。"
break;
case 2:
x.innerHTML = "位置信息是不可用的。"//网络不可用或是卫星连接不到
break;
case 3:
x.innerHTML = "请求用户地理位置超时。"
break;
case 0:
x.innerHTML = "未知错误。"
break;
}
}
</script>
</html>
结果
代码参考《HTML5揭秘》