利用百度地图api，在地图上设置一个标记点，以标记点为圆心，搜索不同半径范围内的覆盖物

利用百度地图api，通过在输入框（带自动填充）输入标记点，然后给标记点设置了一个信息窗口，信息窗口中可以选择搜索的半径范围，分别为1，2，3，5，10km。通过下拉框选择好半径范围后，自动画出一个对应半径的圆，并显示出在范围内的覆盖物（覆盖物是随机生成的，如有需要可以通过后台返回自己的数据并生成对应的覆盖物），点击覆盖物弹出自定义的覆盖物信息窗口。效果图如下：

相关实现如下：

1.引入相关的css 

css文件下载：https://download.csdn.net/download/qq_27387133/12111065

2.相关的js代码

mybaidu.js

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:18});
var point = new BMap.Point(113.089729,23.015756);
		
var startPoint,endPoint,pp,pp2,lastPoint,lastPoint2;
var ppMarker,ppMarker2;
		
map.enableScrollWheelZoom(true);
map.centerAndZoom(point, 16);
var traffic = new BMap.TrafficLayer();        // 创建交通流量图层实例      
map.addTileLayer(traffic); 
 
function G(id) {
	return document.getElementById(id);
}
		
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
				{"input" : "suggestId"
				,"location" : map
			});

			ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
			var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if (e.fromitem.index > -1) {
					value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
				}    
				str = "FromItem
index = " + e.fromitem.index + "
value = " + value;
				
				value = "";
				if (e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
				}    
				str += "
ToItem
index = " + e.toitem.index + "
value = " + value;
				G("searchResultPanel").innerHTML = str;
			});

			var myValue;
			ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
			var _value = e.item.value;
				myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
				G("searchResultPanel").innerHTML ="onconfirm
index = " + e.item.index + "
myValue = " + myValue;
				
				setPlace();
			});
			
			window.circleArr = [];
			window.potentialPointArr = [];

			function setPlace(){
				var opts = {
				        width : 400,     // 信息窗口宽度
				        height: 100,     // 信息窗口高度
				        title : "信息窗口" , // 信息窗口标题
				        enableMessage:true//设置允许信息窗发送短息
				    };
				var content = "
"
					content +="请选择搜索半径  请选择1km2km3km" +
							"5km10km"
			        content +="
";
			        content +="
";
			    lastPoint = pp;
				function myFun(){
					myRemoveOverlay(lastPoint);
					pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
					map.centerAndZoom(pp, 16);
					ppMarker =new BMap.Marker(pp);
					var infoWindow = new BMap.InfoWindow(content,opts);
					ppMarker.addEventListener("click", function(){ 
						map.openInfoWindow(infoWindow,pp); //开启信息窗口
						setTimeout(() => {
				             $(document).on("change","#area_select",function () {
				            	for(var i=0;i {
			             $(document).on("change","#area_select",function () {
			            	for(var i=0;i潜力点名称：潜力点"+i+"
人数："+i+"人
",opts);
					map.openInfoWindow(potentialMarkerInfoWindow,curPoint); //开启信息窗口
				});
    		}
			
			
			//清除某个点
			function myRemoveOverlay(p){
				if(p!=undefined){
					var allOverlay = map.getOverlays();
					for(var i = 0;i

3.相关html代码

申请百度地图api的ak值的方法可参考下面的连接

申请百度地图开发者AK和基本使用