HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例,可返回用户位置的经度和纬度
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition)
;
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
position.coords.latitude 为获取的纬度
position.coords.longitude 为获取的经度
根据获取到的经纬度显示在谷歌地图上:
//对于谷歌地图的API 需要你自己注册账号,才能获取对应的地图API调用
<script type="text/javascript">
$.ajax({
type : "get",
async : false,//同步阻塞加载
cache : false,//不缓存
url : "${estatePrefix}/ip.html",
contentType : "application/json; charset=utf-8",
dataType : "json",
success : function(res) {
if (res == "1") {//中国
document
.write("<script src='http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN'><\/script>");
} else {//国外
document
.write("<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'><\/script>");
}
},
error : function() {
document
.write("<script src='http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN'><\/script>");
}
});
</script>
<script>
var lon =position.coords.longitude ;
var lat =position.coords.latitude ;
function initialize() {
var mapOptions = {
scaleControl : true,
center : new google.maps.LatLng(lat, lon),
zoom : 5
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = '${estatePrefix}/resources/images/marker.png'; //显示当前位置的图标
var marker = new google.maps.Marker({
map : map,
position : map.getCenter(),
icon : image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body onload ="getLocation()">
<p id="demo"></p>
地图显示的位置:<div id="map-canvas"></div>
</body>