HTML5获取地理位置及百度地图展示实例

         这两天在看在移动端通过浏览器获取地理位置的相关方法，顺便深入了解一下百度地图API的相关功能。
测试实例包含了以下功能：
(1)通过IP地址获取城市地址（并不完全准确，存在代理IP或IP中转时定位与实际位置不一致的情况）
(2)通过移动端浏览器及GPS定位位置坐标
(3)根据位置坐标转换百度地图坐标
(4)根据位置坐标逆推城市具体地址功能（存在一定误差）
(5)通过使用百度API展示地理位置及添加标注功能
 


  1. html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>地理位置测试title>
  6.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3">script>
  7.     <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js">script>
  8.     <script type="text/javascript">
  9.         var map;
  10.         var gpsPoint;
  11.         var baiduPoint;
  12.         var gpsAddress;
  13.         var baiduAddress;
  14.  
  15.         function getLocation() {
  16.             //根据IP获取城市
  17.             var myCity = new BMap.LocalCity();
  18.             myCity.get(getCityByIP);
  19.  
  20.             //获取GPS坐标
  21.             if (navigator.geolocation) {
  22.                 navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });
  23.             } else {
  24.                 alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
  25.             }
  26.         }
  27.       
  28.         function showMap(value) {
  29.             var longitude = value.coords.longitude;
  30.             var latitude = value.coords.latitude;
  31.             map = new BMap.Map("map");
  32.             //alert("坐标经度为：" + latitude + "， 纬度为：" + longitude );
  33.             gpsPoint = new BMap.Point(longitude, latitude);    // 创建点坐标
  34.             map.centerAndZoom(gpsPoint, 15);
  35.  
  36.             //根据坐标逆解析地址
  37.             var geoc = new BMap.Geocoder();
  38.             geoc.getLocation(gpsPoint, getCityByCoordinate);
  39.  
  40.             BMap.Convertor.translate(gpsPoint, 0, translateCallback);
  41.         }
  42.  
  43.         translateCallback = function (point) {
  44.             baiduPoint = point;
  45.             var geoc = new BMap.Geocoder();
  46.             geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);
  47.         }
  48.  
  49.         function getCityByCoordinate(rs) {
  50.             gpsAddress = rs.addressComponents;
  51.             var address = "GPS标注：" + gpsAddress.province + "," + gpsAddress.city + "," + gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber;
  52.             var marker = new BMap.Marker(gpsPoint);  // 创建标注
  53.             map.addOverlay(marker);              // 将标注添加到地图中
  54.             var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
  55.             marker.setLabel(labelgps); //添加GPS标注    
  56.         }
  57.  
  58.         function getCityByBaiduCoordinate(rs) {
  59.             baiduAddress = rs.addressComponents;
  60.             var address = "百度标注：" + baiduAddress.province + "," + baiduAddress.city + "," + baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber;
  61.             var marker = new BMap.Marker(baiduPoint);  // 创建标注
  62.             map.addOverlay(marker);              // 将标注添加到地图中
  63.             var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
  64.             marker.setLabel(labelbaidu); //添加百度标注  
  65.         }
  66.  
  67.         //根据IP获取城市
  68.         function getCityByIP(rs) {
  69.             var cityName = rs.name;
  70.             alert("根据IP定位您所在的城市为:" + cityName);
  71.         }
  72.  
  73.         function handleError(value) {
  74.             switch (value.code) {
  75.                 case 1:
  76.                     alert("位置服务被拒绝");
  77.                     break;
  78.                 case 2:
  79.                     alert("暂时获取不到位置信息");
  80.                     break;
  81.                 case 3:
  82.                     alert("获取信息超时");
  83.                     break;
  84.                 case 4:
  85.                     alert("未知错误");
  86.                     break;
  87.             }
  88.         }
  89.  
  90.         function init() {
  91.             getLocation();
  92.         }
  93.  
  94.         window.onload = init;
  95.  
  96.     script>
  97. head>
  98. <body>
  99.     <div id="map" style="width:600px;height:600px;">div>
  100. body>
  101. html>
以手机UC浏览器测试正常。需要授权浏览器获取位置权限。更多实例可参考百度API：http://developer.baidu.com/map/jsdemo.htm

注：本文转载自blog.csdn.net的CYZERO的文章"http://blog.csdn.net/cyzero/article/details/42584193"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！