<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地理位置测试</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<p>
<button onclick="geoFindMe()">Show my location</button>
</p>
<div id="out"></div>
<div id="xj"></div>
</body>
<script>
if (navigator.geolocation) {
var output = document.getElementById("out");
/* 地理位置服务可用 */
output.innerHTML = '地理位置服务可用';
} else {
var output = document.getElementById("out");
/* 地理位置服务不可用 */
output.innerHTML = '地理位置服务不可用';
}
function geoFindMe() {
var output = document.getElementById("out");
var xj = document.getElementById("xj");
if (!navigator.geolocation) {
output.innerHTML = "<p>您的浏览器不支持地理位置</p>";
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
var img = new Image();
img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
output.appendChild(img);
};
function error(e) {
console.log(e);
xj.innerHTML = e.message;
output.innerHTML = "无法获取您的位置";
if (e.message == '' || e.message == 'Not found GPS!') {
output.innerHTML = "无法获取您的位置";
}
};
output.innerHTML = "<p>Locating…</p>";
navigator.geolocation.getCurrentPosition(success, error);
}
</script>
</html>