利用百度地图api，通过在输入框（带自动填充）输入标记点，然后给标记点设置了一个信息窗口，信息窗口中可以选择搜索的半径范围，分别为1，2，3，5，10km。通过下拉框选择好半径范围后，自动画出一个对应半径的圆，并显示出在范围内的覆盖物（覆盖物是随机生成的，如有需要可以通过后台返回自己的数据并生成对应的覆盖物），点击覆盖物弹出自定义的覆盖物信息窗口。效果图如下：
相关实现如下：
1.引入相关的css
<link rel="stylesheet" type="text/css" href="/baidu_map_index.css"/>css文件下载：
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<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />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<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
window.circleArr = [];
window.potentialPointArr = [];
function setPlace(){
var opts = {
width : 400, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};
var content = "<div>"
content +="<span>请选择搜索半径</span> <select id='area_select'><option value='0'>请选择</option><option value='1'>1km</option><option value='2'>2km</option><option value='3'>3km</option>" +
"<option value='4'>5km</option><option value='5'>10km</option></select>"
content +="<p style='margin-top:20px;'></p>";
content +="</div>";
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<potentialPointArr.length;i++){
myRemoveOverlay(potentialPointArr[i]);
}
for(var i=0;i<circleArr.length;i++)map.removeOverlay(circleArr[i]);
var area = $("#area_select").val();
var areaKm = 0;
if(area==1){
areaKm = 1000;
map.centerAndZoom(pp, 16);
}else if(area==2){
areaKm = 2000;
map.centerAndZoom(pp, 15);
}else if(area==3){
areaKm = 3000;
map.centerAndZoom(pp, 15);
}else if(area==4){
areaKm = 5000;
map.centerAndZoom(pp, 14);
}else if(area==5){
areaKm = 10000;
map.centerAndZoom(pp, 13);
}else{
return false;
}
//设置半径为10km圆形范围
var circle = new BMap.Circle(pp,areaKm,{strokeColor:'red',fillOpacity:'0.4',strokeStyle:'solid',strokeWeight:'2'});
map.addOverlay(circle);
circleArr.push(circle);
var curPoint;
for(var i=0;i<500;i++){
var x=(Math.random()-Math.random())*0.2+pp.lng;
var y=(Math.random()-Math.random())*0.2+pp.lat;
var pt = new BMap.Point(x, y);
curPoint = pt;
if(map.getDistance(pp,pt).toFixed(2)<areaKm){
setPotentialPoint(pt,i,curPoint,opts);
}
}
//计算两点之间的距离，当添加的点到圆心的距离小于半径即在范围内
// alert(map.getDistance(point,pointB).toFixed(2));
})
}, 100);
});
map.openInfoWindow(infoWindow,pp); //开启信息窗口
setTimeout(() => {
$(document).on("change","#area_select",function () {
for(var i=0;i<potentialPointArr.length;i++){
myRemoveOverlay(potentialPointArr[i]);
}
for(var i=0;i<circleArr.length;i++)map.removeOverlay(circleArr[i]);
var area = $("#area_select").val();
var areaKm = 0;
if(area==1){
areaKm = 1000;
map.centerAndZoom(pp, 16);
}else if(area==2){
areaKm = 2000;
map.centerAndZoom(pp, 15);
}else if(area==3){
areaKm = 3000;
map.centerAndZoom(pp, 15);
}else if(area==4){
areaKm = 5000;
map.centerAndZoom(pp, 14);
}else if(area==5){
areaKm = 10000;
map.centerAndZoom(pp, 13);
}else{
return false;
}
//设置半径为10km圆形范围
var circle = new BMap.Circle(pp,areaKm,{strokeColor:'red',fillOpacity:'0.4',strokeStyle:'solid',strokeWeight:'2'});
map.addOverlay(circle);
circleArr.push(circle);
var curPoint;
for(var i=0;i<500;i++){
var x=(Math.random()-Math.random())*0.2+pp.lng;
var y=(Math.random()-Math.random())*0.2+pp.lat;
var pt = new BMap.Point(x, y);
curPoint = pt;
if(map.getDistance(pp,pt).toFixed(2)<areaKm){
setPotentialPoint(pt,i,curPoint,opts);
}
}
//计算两点之间的距离，当添加的点到圆心的距离小于半径即在范围内
// alert(map.getDistance(point,pointB).toFixed(2));
})
}, 100);
startPoint = pp;
var ppMarkerlabel = new BMap.Label("标记点",{offset:new BMap.Size(20,-10)});
ppMarker.setLabel(ppMarkerlabel);
map.addOverlay(ppMarker); //添加标注
ppMarker.enableDragging();
ppMarker.addEventListener("dragend", function (e) {
var x = e.point.lng; //经度
var y = e.point.lat; //纬度
startPoint.lng=x;
startPoint.lat=y;
});
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
//设置潜力点
function setPotentialPoint(point1,i,curPoint,opts){
var potentialMarker = new BMap.Marker(point1);
var markerlabel = new BMap.Label("潜力点"+i,{offset:new BMap.Size(20,-10)});
potentialMarker.setLabel(markerlabel);
potentialPointArr.push(point1);
map.addOverlay(potentialMarker);
potentialMarker.addEventListener("click", function(){
var potentialMarkerInfoWindow = new BMap.InfoWindow("<p>潜力点名称：潜力点"+i+"</p><p>人数："+i+"人</p>",opts);
map.openInfoWindow(potentialMarkerInfoWindow,curPoint); //开启信息窗口
});
}
//清除某个点
function myRemoveOverlay(p){
if(p!=undefined){
var allOverlay = map.getOverlays();
for(var i = 0;i<allOverlay.length;i++) {
if(allOverlay[i].toString()=="[object Marker]"){
if (allOverlay[i].getPosition().lng == p.lng && allOverlay[i].getPosition().lat == p.lat) {
map.removeOverlay(allOverlay[i]);
}
}
}
}
}
// 点击清除按钮
$(".input-clear").on("click",function(){
$(this).parent().find("input").eq(0).val("");
});
//窗口改变事件
changeDivHeight();
$(window).resize(function(){
changeDivHeight();
});
function changeDivHeight(){
$(".main_center").width($("body").width()-5);
}
var secondMenuClickNum = 0;
$("#second_menu").on("click",function(){
if(secondMenuClickNum%2==0){
$("#left-panel").hide();
$(this).css("left","0px");
$(this).html(">");
$(this).attr("title","展开");
}else{
$("#left-panel").show();
$(this).css("left","318px");
$(this).html("<");
$(this).attr("title","收起");
}
secondMenuClickNum++
})3.相关html代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="https://api.map.baidu.com/api?v=2.0&ak=你申请的ak值&s=1" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<link rel="stylesheet" href="/layui.css" />
<script src="/layui.all.js"></script>
<link rel="stylesheet" type="text/css" href="/baidu_map_index.css"/>
<style>
#map{
padding:0;height: 100%; width: 100%; margin: 0; padding: 0;
}
.main_left {
float: left;
border: 1px solid #e2e7ec;
}
</style>
<script type="text/javascript" src="/mybaidu.js"></script>
</head>
<body>
<div class="layui-row" style="height:100%;">
<div class="main_left" style="font-size:16px;width:0px;height: auto;">
<div id="left-panel" class="" style="height: auto;">
<div id="searchbox" class="clearfix">
<div id="searchbox-container" style="width: 318px;">
<div id="sole-searchbox-content" class="searchbox-content" style="display: none;">
<input id="sole-input" class="searchbox-content-common" type="text" name="word" autocomplete="off" maxlength="256" placeholder="搜地点、查公交、找路线" value="">
<div class="input-clear" title="清空" style="display: none;"></div>
<div class="searchbox-content-button right-button route-button loading-button" data-title="路线">
</div>
</div>
<div id="route-searchbox-content" style="width: 318px;" class="searchbox-content route-searchbox-content drive">
<div class="routebox">
<div class="searchbox-content-common routebox-content">
<div class="routebox-revert" title="切换起终点">
<div class=""></div>
</div>
<div class="routebox-inputs" style="position: relative;">
<div class="routebox-input route-start">
<div class="route-input-icon"></div>
<input id="suggestId" style="border-bottom: 1px #eae8e8 solid;" maxlength="256" placeholder="输入标记点" class="route-start-input" type="text" value="">
<div class="input-clear" title="清空" style="display: block;"></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;left:300px;position: absolute;z-index:1000"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="toast-wrapper">
<div id="toast">
<img class="info-tip-img" src="/wolfman/static/common/images/transparent.gif" alt="">
<span class="info-tip-text"></span>
</div>
</div>
</div>
<ul id="cards-level0" class="cardlist"></ul>
<ul id="cards-level2" class="cardlist"></ul>
</div>
<div hidden id='second_menu' style="position: absolute;left: 318px;top: 6px;overflow: hidden;font-size: 30px;color: #fff;z-index: 3;background: rgb(51, 133, 255);cursor:pointer" title="收起">
<
</div>
</div>
<div class="main_center claro">
<div style="width: 100%; height: 100%; margin: 0;">
<div id="allmap" style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</body>
</html>申请百度地图api的ak值的方法可参考下面的连接
申请百度地图开发者AK和基本使用
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
