html5学习(地理位置定位)

最新推荐文章于 2022-02-03 21:28:29 发布

程宇寒

最新推荐文章于 2022-02-03 21:28:29 发布

阅读量221

点赞数

文章标签： html html5 前端地理位置定位 geolocation

本文链接：https://blog.csdn.net/czh500/article/details/111876918

版权

我把代码部署到我本地的tomcat，然后用我笔记本电脑的火狐和IE测试了一下，都是报错，没办法测试！

html5地理位置定位，测试比较困难和麻烦，最好把代码部署到服务器上进行测试，而且协议还要是https，http协议估计还没法测试，估计会报错。

代码部署到服务器上之后，最好是用手机去访问，手机比较好测试，你抱一台笔记本电脑测试也不太实际！

我把代码部署到我本地的tomcat，然后用我笔记本电脑的火狐和IE测试了一下，都是报错，没办法测试！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(地理位置定位)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
<h3>html5学习(地理位置定位)</h3>
<div id="showLocation" style="height: 200px;">
<font style="font-size: 25px;">您的地理位置信息如下：</font>
</div>
</body>
<script type="text/javascript">
function $(elementId) {
	return document.getElementById(elementId);
}

if (navigator.geolocation) {
	navigator.geolocation.watchPosition(success, error, options);
// 	navigator.geolocation.watchPosition(showPosition, error, options);
// 	navigator.geolocation.getCurrentPosition(success);
// 	navigator.geolocation.getCurrentPosition(showPosition);
} else {
	alert("该浏览器不支持获取地理位置");
}

function success(position) {
	var divNode = $("showLocation");
	divNode.innerHTML = "<br />纬度:" + position.coords.latitude + "<br />经度:"
				+ position.coords.longitude;
	}

function error(err) {
	alert(err.code + "-----" + err.message);
}

var options = {};

function showPosition(position) {
	var latlon = position.coords.latitude + "," + position.coords.longitude;
	var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
			+ latlon + "&zoom=14&size=400x300&sensor=false";
	document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
</script>
</html>

完！