|
-
-
- <!DOCTYPE HTML>
- <html style="height:100%;">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui" />
- <title>高德地图JavaScript API</title>
- </head>
- <style type="text/css" rel="stylesheet">
- 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;}
- header div:nth-child(1){position:absolute;z-index:1000;width:40px;cursor:pointer;}
- header div:nth-child(1) img{width:40px;height:40px;margin-left:3px;margin-top:10px;}
- header div:nth-child(2){width:100%}
- html body{height:100%;margin:0;font-family: "微软雅黑";}
- #map{position:absolute;top:60px;width:100%;font-family: "微软雅黑";}
- .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;}
- #localtion{bottom:80px;}
- #panner{background-color:#272822;opacity:0.8;width:100%;height:140px;position:absolute;bottom:0;z-index:17;font-size:12px;color:#fff;}
- #visit{bottom:20px;}
- </style>
- <body>
-
-
- <div id="map"></div>
- </body>
- <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=e8496e8ac4b0f01100b98da5bde96597"></script>
- <script type="text/javascript">
- (function (){
- var mapHeight = document.body.clientHeight - 200;
- document.getElementById('map').style.height = mapHeight + 'px';
- var map = new AMap.Map('map'), geolocation = null, result = document.getElementById('result');
- map.plugin('AMap.Geolocation', function () {
- geolocation = new AMap.Geolocation({
- enableHighAccuracy: true,//是否使用高精度定位,默认:true
- timeout: 10000, //超过10秒后停止定位,默认:无穷大
- maximumAge: 0, //定位结果缓存0毫秒,默认:0
- convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
- showButton: true, //显示定位按钮,默认:true
- buttonPosition: 'LB', //定位按钮停靠位置,默认:'LB',左下角
- buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
- showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
- showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
- panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
- zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
- });
- map.addControl(geolocation);
- AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
- AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
- });
-
- /*
- *获取当前位置信息
- */
- function getCurrentPosition () {
- geolocation.getCurrentPosition();
- };
- /*
- *监控当前位置并获取当前位置信息
- */
- function watchPosition () {
- geolocation.watchPosition();
- };
- /*
- *解析定位结果
- */
- function onComplete (data) {
- var str = '<p>定位成功</p>';
- str += '<p>经度:' + data.position.getLng() + '</p>';
- str += '<p>纬度:' + data.position.getLat() + '</p>';
- str += '<p>精度:' + data.accuracy + ' 米</p>';
- str += '<p>是否经过偏移:' + (data.isConverted ? '是' : '否') + '</p>';
- result.innerHTML = str;
- };
- /*
- *解析定位错误信息
- */
- function onError (data) {
- var str = '<p>定位失败</p>';
- str += '<p>错误信息:'
- switch(data.info) {
- case 'PERMISSION_DENIED':
- str += '浏览器阻止了定位操作';
- break;
- case 'POSITION_UNAVAILBLE':
- str += '无法获得当前位置';
- break;
- case 'TIMEOUT':
- str += '定位超时';
- break;
- default:
- str += '未知错误';
- break;
- }
- str += '</p>';
- result.innerHTML = str;
- };
-
- document.getElementById('localtion').onclick = function(){
- getCurrentPosition();
- };
-
- document.getElementById('visit').onclick = function(){
- watchPosition();
- };
-
- })();
- </script>
- </html>
-
-
|