如何去掉高德地圖定位產生的淡藍圓形區域
阿新 • • 發佈：2019-02-15
必備條件：
一、瀏覽器支援定位
瀏覽器定位外掛，封裝了標準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>
一、瀏覽器支援定位
瀏覽器定位外掛，封裝了標準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
以下是效果圖：
