<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
</head>
<body>
<input type="button" id="btn" value="获取位置"/>
<div id="info" title="放置用户信息" style="width:400px;height:60px;border:1px;#ccc dashe;margin-top:10px;">
</div>
<script>
//获得元素引用
var btn=document.getElementById('btn');
var info=document.getElementById('info');
var map=document.getElementById('map');
var geolocation;
var gmap;
var gmarker;
//按钮单击事件，获取地理位置
btn.onclick=function(){
if(window.navigator.geolocation){
info.innerHTML="请等待查询结果返回";
geolocation=window.navigator.geolocation;
geolocation.getCurrentPosition(getPositionSuccess,getPositionError,{timeout:5000});
}else{
info.innerHTML="你的浏览器不支持地理位置定位";
}
}
function getPositionError(error){
info.innerHTML="error.message";
}
function getPositionSuccess(position){
var lat=position.coords.latitude;
var lon=position.coords.longitude;
//定义持续追踪位置
geolocation.watchPosition(refreshPosition);
//载入google地图
var latLng=new google.map.latLng(lat,lon);
var mapOptions={zoom:16,center:latLng,mapTypeId:google.map.MapTypeId.ROADMAP};
gamp=new google.maps.Map(map,mapOptions);
//向地图中添加标记
gmarker=new google.map.Marker({position:latLng,map:gmap});
}
//持续追踪位置
function refreshPosition(position){
var lat=position.coords.latitude;
var lon=position.coords.longitude;
//将经纬度转成地名
getPlaceFromFlickr(lat,lon,'output');
var latLng=new google.map.latLng(lat,lon);
//重设地图位置
gamp.setCenter(latLng);
//重设标记位置
gamp.setOptions({position:latLng});
}
//将经纬度转换成地名
function getPlaceFromFlickr(lat,lon,callback){
info.innerHTML="你所在的位置：经度"+lat+"纬度"+lon;
//定义YQL语句
var yql='select*from flickr.places where lat='+lat+'and lon='+lon;
//将YQL网络服务的API嵌入到网页，这是js库
var url='http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(yql)+'&format=json&diagnostics='+'false&callback='+callback;
//创建一个script元素，并引用js库，最后放在head元素中
var script=document.createElement('script');
script.setAttribute('src',url);
document.getElementByTagName('head')[0].appendChild(script);
};
//回调函数，输出位置地名
function output(o){
if(typeof(o.query.results.places.place)!='undefined'){
info.innerHTML+="<br/>"+o.query.results.places.place.name;
}
}
</script>
</body>
</html>
管理
