You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

112 lines
4.3 KiB

  1. <!DOCTYPE HTML>
  2. <html style="height:100%;">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
  6. <title>高德地图JavaScript API</title>
  7. </head>
  8. <style type="text/css" rel="stylesheet">
  9. header{position:absolute;height:60px;top:0;width:100%;background-color:#F4F4F4;z-index:999;text-align:center;line-height:60px;color:#666666;font-weight:bold;border-bottom:1px solid #BBBBBB;}
  10. header div:nth-child(1){position:absolute;z-index:1000;width:40px;cursor:pointer;}
  11. header div:nth-child(1) img{width:40px;height:40px;margin-left:3px;margin-top:10px;}
  12. header div:nth-child(2){width:100%}
  13. html body{height:100%;margin:0;font-family: "微软雅黑";}
  14. #map{position:absolute;top:60px;width:100%;font-family: "微软雅黑";}
  15. .float_div{cursor:pointer;border-radius:3px;text-align:center;line-height:50px;background-color:#008CFF;width:60px;height:45px;position:absolute;z-index:888;right:5px;color: #fff;}
  16. #localtion{bottom:80px;}
  17. #panner{background-color:#272822;opacity:0.8;width:100%;height:140px;position:absolute;bottom:0;z-index:17;font-size:12px;color:#fff;}
  18. #visit{bottom:20px;}
  19. </style>
  20. <body>
  21. <div id="map"></div>
  22. </body>
  23. <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=e8496e8ac4b0f01100b98da5bde96597"></script>
  24. <script type="text/javascript">
  25. (function (){
  26. var mapHeight = document.body.clientHeight - 200;
  27. document.getElementById('map').style.height = mapHeight + 'px';
  28. var map = new AMap.Map('map'), geolocation = null, result = document.getElementById('result');
  29. map.plugin('AMap.Geolocation', function () {
  30. geolocation = new AMap.Geolocation({
  31. enableHighAccuracy: true,//是否使用高精度定位,默认:true
  32. timeout: 10000, //超过10秒后停止定位,默认:无穷大
  33. maximumAge: 0, //定位结果缓存0毫秒,默认:0
  34. convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
  35. showButton: true, //显示定位按钮,默认:true
  36. buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
  37. buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
  38. showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
  39. showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
  40. panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
  41. zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
  42. });
  43. map.addControl(geolocation);
  44. AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
  45. AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
  46. });
  47. /*
  48. *获取当前位置信息
  49. */
  50. function getCurrentPosition () {
  51. geolocation.getCurrentPosition();
  52. };
  53. /*
  54. *监控当前位置并获取当前位置信息
  55. */
  56. function watchPosition () {
  57. geolocation.watchPosition();
  58. };
  59. /*
  60. *解析定位结果
  61. */
  62. function onComplete (data) {
  63. var str = '<p>定位成功</p>';
  64. str += '<p>经度:' + data.position.getLng() + '</p>';
  65. str += '<p>纬度:' + data.position.getLat() + '</p>';
  66. str += '<p>精度:' + data.accuracy + ' 米</p>';
  67. str += '<p>是否经过偏移:' + (data.isConverted ? '是' : '否') + '</p>';
  68. result.innerHTML = str;
  69. };
  70. /*
  71. *解析定位错误信息
  72. */
  73. function onError (data) {
  74. var str = '<p>定位失败</p>';
  75. str += '<p>错误信息:'
  76. switch(data.info) {
  77. case 'PERMISSION_DENIED':
  78. str += '浏览器阻止了定位操作';
  79. break;
  80. case 'POSITION_UNAVAILBLE':
  81. str += '无法获得当前位置';
  82. break;
  83. case 'TIMEOUT':
  84. str += '定位超时';
  85. break;
  86. default:
  87. str += '未知错误';
  88. break;
  89. }
  90. str += '</p>';
  91. result.innerHTML = str;
  92. };
  93. document.getElementById('localtion').onclick = function(){
  94. getCurrentPosition();
  95. };
  96. document.getElementById('visit').onclick = function(){
  97. watchPosition();
  98. };
  99. })();
  100. </script>
  101. </html>