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

必备条件:

一、浏览器支持定位

浏览器定位插件,封装了标准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



以下是效果图:


发布了36 篇原创文章 · 获赞 11 · 访问量 10万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章