如何去掉高德地图定位产生的淡蓝圆形区域

深碍√TFBOYSˉ_ 2022-08-14 05:41 749阅读 0赞

必备条件：  
  
一、浏览器支持定位  
  
浏览器定位插件，封装了标准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

以下是效果图：

![Center][]

![Center 1][]

![Center 2][]

[Center]: /images/20220731/0357680473884d70abc2dbdf0123d0ad.png
[Center 1]: /images/20220731/cebdfdbe50c74f309e1ce020e65a4bd0.png
[Center 2]: /images/20220731/73d3db5c85d648f1a43fa117514b1c45.png