必备条件:

一、浏览器支持定位

浏览器定位插件,封装了标准HTML5定位,并且包含纠偏模块。

由于核心是HTML5定位,所以浏览器定位插件仅适用于支持HTML5的浏览器上,比如,Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 等。同时,需要浏览器允许该服务进行定位。如下图:

另外,浏览器定位插件也是混合定位,获取了wifi、基站信息用以定位,对于拥有 GPS 的设备,比如 iPhone,由于获得GPS信息,使得地理定位更加精确。

浏览器定位,最好使用在手机浏览器上,因为手机上植入了GPS模块,定位会更加准确,也更加符合使用场景。PC浏览器上,建议使用IP定位。



定位代码:(此代码已经将定位产生的背景为淡蓝色的的圆形区域去掉)

<!doctype html> 

 <html> 

 <head> 

     <meta charset="utf-8"> 

     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 

     <title>浏览器定位</title> 

     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> 

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

     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> 

 <body> 

 <div id='container'></div> 

 <div id="tip"></div> 

 <script type="text/javascript"> 

     var map, geolocation; 

     //加载地图,调用浏览器定位服务 

     map = new AMap.Map('container', { 

         resizeEnable: true 

     }); 

     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: false,        //定位成功后用圆圈表示定位精度范围,默认:true  (去掉圆形区域) 

             panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true 

             zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false 

         }); 

         map.addControl(geolocation); 

         geolocation.getCurrentPosition(); 

         AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 

         AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息 

     }); 

     //解析定位结果 

     function onComplete(data) { 

         var str=['定位成功']; 

         str.push('经度:' + data.position.getLng()); 

         str.push('纬度:' + data.position.getLat()); 

         str.push('精度:' + data.accuracy + ' 米'); 

         str.push('是否经过偏移:' + (data.isConverted ? '是' : '否')); 

         document.getElementById('tip').innerHTML = str.join('<br>'); 

     } 

     //解析定位错误信息 

     function onError(data) { 

         document.getElementById('tip').innerHTML = '定位失败'; 

     } 

 </script> 

 </body> 

 </html>





二、应用浏览器定位,以当前定位点为中心点自动画一个半径1000米的圆形区域



<!doctype html> 

 <html> 

 <head> 

     <meta charset="utf-8"> 

     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 

     <title>以浏览器定位点为圆心画圆</title> 

     <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> 

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

     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> 

 <body> 

 <div id='container'></div> 

 <div id="tip"></div> 

 <script type="text/javascript"> 

      var map, geolocation; 

     var editor={}; 

     //加载地图,调用浏览器定位服务 

     map = new AMap.Map('rightBox', { 

         resizeEnable: true 

     }); 

     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: false,        //定位成功后用圆圈表示定位精度范围,默认:true 

             panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true 

             zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false 

         }); 

         map.addControl(geolocation); 

         geolocation.getCurrentPosition(); 

         AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 

         AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息 

     }); 

     //解析定位结果 

     function onComplete(data) { 

         var str=['定位成功']; 

         str.push('经度:' + data.position.getLng()); 

         str.push('纬度:' + data.position.getLat()); 

         str.push('精度:' + data.accuracy + ' 米'); 

         str.push('是否经过偏移:' + (data.isConverted ? '是' : '否')); 

         document.getElementById('tip').innerHTML = str.join('<br>'); 

         //定位圆心位置 

               editor._circle=(function(){ 

           var circle = new AMap.Circle({ 

               center: [data.position.getLng(), data.position.getLat()],// 圆心位置 

               radius: 1000, //半径 

               strokeColor: "#F33", //线颜色 

               strokeOpacity: 1, //线透明度 

               strokeWeight: 3, //线粗细度 

               fillColor: "#ee2200", //填充颜色 

               fillOpacity: 0.35//填充透明度 

           }); 

           circle.setMap(map); 

           return circle; 

       })(); 

         map.setFitView(); 

     } 

     //解析定位错误信息 

     function onError(data) { 

         document.getElementById('tip').innerHTML = '定位失败'; 

     } 

      

     

 </script> 

 </body> 
</html>



最核心的参数是:  showCircle: false,        //定位成功后用圆圈表示定位精度范围,默认:true;将默认值改为:false即可。。。很简单了。。望采纳!。。。


可参考链接:http://lbs.amap.com/api/javascript-api/reference/plugin/#m_AMap.Geolocation



以下是效果图:

android 高德地图显示定位蓝点 高德地图上显示蓝色_map应用

android 高德地图显示定位蓝点 高德地图上显示蓝色_ci_02

android 高德地图显示定位蓝点 高德地图上显示蓝色_map应用_03