html5学习(地理位置定位)

我把代码部署到我本地的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>

完!

猜你喜欢

转载自blog.csdn.net/czh500/article/details/111876918
今日推荐