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