百度地图⾼级开发：获取某范围半径圆形区域检索覆盖物内的所有标注的解决⽅
案（1）
需求说明
1. 基于百度地图jsAPI开发；
2. 点击地图，以该点为中⼼，搜索周边范围所有的标注信息；
项⽬分解
1. 使⽤map.addEventListener监听事件；
2. 增加中⼼点标注；
3. 增加圆形覆盖物；
4. 根据中⼼点的坐标信息和圆形覆盖物半径信息，传⼊后台，⽐对是否在该范围内，⽣成JSON数据，异步加载并⽣成标注。
引⼊百度API
建议采⽤该⽅式，避免F12控制台错误信息提⽰。
<script type="text/javascript"src="//api.map.baidu/getscript?v=3.0&ak=3HGqGo1RHf8zsLZCM**"></script>
初始化地图
var map =new BMap.Map("lock_map");
var point =new BMap.Point(117.016415,36.619618);    AndZoom(point,12);
go2map地图北京ableScrollWheelZoom(true);
map.addEventListener('click',function(e){
//清除覆盖物;
map.clearOverlays();
//console.log(e);
//创建新的坐标中⼼;
var x = e.point.lng;
var y = e.point.lat;
var newPoint =new BMap.Point(x, y);
addMaker(newPoint);//标注中⼼;
addCircle(newPoint);//范围;
searchMaker(x, y);//周边标注;
})
封装函数
标注覆盖物
//添加标注;
function addMaker(point){
var marker =new BMap.Marker(point);
map.addOverlay(marker);
}
圆形覆盖物
/
/添加圆形覆盖物;
function addCircle(newPoint){
var circle =new BMap.Circle(newPoint,10000,{
strokeColor:'blue',
strokeWeight:1,
strokeOpacity:0.5
});
map.addOverlay(circle);
}
范围内标注搜索
//搜索周边坐标;
function searchMaker(x, y){
//后台数据库，返回范围内的数据经纬度即可;
console.log("中⼼经纬度："+ x +","+ y);
}
@lockdata

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。