高德地圖標記范圍圓圈


運行demo:

<!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 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>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});


var circle = new AMap.Circle({
center: new AMap.LngLat("116.403322", "39.920255"),// 圓心位置
radius: 3000, //半徑
strokeColor: "#FF33FF", //線顏色
strokeOpacity: 0.7, //線透明度
strokeWeight: 3, //線寬
fillColor: "#1791fc", //填充色
fillOpacity: 0.5//填充透明度
});

//聲明一個list
var list={
"size":4,
"data":[
{"x":116.397428,"y": 39.921883},
{"x":116.397428,"y": 39.920213},
{"x":116.403322,"y": 39.922282},
{"x":116.403322,"y": 39.920249}
]
}

for(var j = 0,map;j < list.size; j++){
var myObj= list.data[j];
var myLngLat=new AMap.LngLat(myObj.x,myObj.y);
console.log(circle.contains(myLngLat));
if(circle.contains(myLngLat)){//如果點在圓內則輸出
var marker = new AMap.Marker({
position: myLngLat,
map: map
});
}

}

circle.setMap(map);//顯示圓圈
map.setFitView();//根據地圖上添加的覆蓋物分布情況,自動縮放地圖到合適的視野級別
</script>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM