项目开发需要获取用户详细的地理位置信息，使用了高德地图API接口

 1 <script type=”text/javascript” src=”http://webapi.amap.com/maps?v=1.4.3&key=您申请的key值”></script>  

复制代码
  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  5     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  6.  6     <title>获取地理位置</title>
  7.  7     <style type="text/css">#iCenter{width:300px; height: 280px; border:1px #000 solid;margin:20px auto;}</style>
  8.  8     <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=3df877a70685dac5ecb3afa375d4c305"></script>
  9.  9 </head>
  10. 10 <body>
  11. 11 
  12. 12 <div id="iCenter"></div>
  13. 13 
  14. 14 <script type="text/javascript">
  15. 15     var mapObj = new AMap.Map(\'iCenter\');
  16. 16     mapObj.plugin(\'AMap.Geolocation\', function () {
  17. 17         geolocation = new AMap.Geolocation({
  18. 18             enableHighAccuracy: true, // 是否使用高精度定位，默认:true
  19. 19             timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
  20. 20             maximumAge: 0,            // 定位结果缓存0毫秒，默认：0
  21. 21             convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
  22. 22             showButton: true,         // 显示定位按钮，默认：true
  23. 23             buttonPosition: \'LB\',     // 定位按钮停靠位置，默认：\'LB\'，左下角
  24. 24             buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
  25. 25             showMarker: true,         // 定位成功后在定位到的位置显示点标记，默认：true
  26. 26             showCircle: true,         // 定位成功后用圆圈表示定位精度范围，默认：true
  27. 27             panToLocation: true,      // 定位成功后将定位到的位置作为地图中心点，默认：true
  28. 28             zoomToAccuracy:true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
  29. 29         });
  30. 30         mapObj.addControl(geolocation);
  31. 31         geolocation.getCurrentPosition();
  32. 32         AMap.event.addListener(geolocation, \'complete\', onComplete); // 返回定位信息
  33. 33         AMap.event.addListener(geolocation, \'error\', onError);       // 返回定位出错信息
  34. 34     });
  35. 35 
  36. 36     function onComplete(obj){
  37. 37         var res = \'经纬度：\' + obj.position + 
  38. 38                 \'\n精度范围：\' + obj.accuracy + 
  39. 39                 \'米\n定位结果的来源：\' + obj.location_type + 
  40. 40                 \'\n状态信息：\' + obj.info + 
  41. 41                 \'\n地址：\' + obj.formattedAddress + 
  42. 42                 \'\n地址信息：\' + JSON.stringify(obj.addressComponent, null, 4);
  43. 43         alert(res);
  44. 44     }
  45. 45 
  46. 46     function onError(obj) {
  47. 47         alert(obj.info + \'--\' + obj.message);
  48. 48         console.log(obj);
  49. 49     }
  50. 50 </script>
  51. 51 </body>
  52. 52 </html>
复制代码

 

复制代码直接保存到html文件中，在手机端查看具体信息

版权声明：本文为wiseblog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wiseblog/articles/9729375.html