地理位置定位

最新推荐文章于 2023-05-19 10:53:15 发布

转载最新推荐文章于 2023-05-19 10:53:15 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cobrenda/archive/2012/07/08/2581478.html

本文介绍如何使用HTML和JavaScript实现地理定位功能，包括获取用户当前位置、使用Google Maps API绘制地图、追踪用户位置并显示附近地点等操作。

<!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>

转载于:https://www.cnblogs.com/cobrenda/archive/2012/07/08/2581478.html