基于百度地图的电子围栏的实现之地理位置检索

Posted 2022-03-31 格格巫 MMQ!!

在上前面电子围栏实现的基础添加地理位置检索的功能，即用户打开电子围栏设置时，根据想定位的地理位置来进行检索并在地图上进行标注。首先得在页面中动态的添加一个检索框，js实现代码如下：
function createDialog(aa)
divs = document.createElement_x(“div”);
divs.style.width = “250px”;
divs.style.height = “30px”;
divs.style.border = “2px solid red”;
divs.style.position = “absolute”;
divs.style.top = “120px”;
divs.style.left = “120px”;
//divs.style.right = “0px”;
divs.id = “newid”;
var input = $("
“)[0];
input.style.opacity = 0.7;
input.style.border = “2px soild green”;
var button = $(”")[0];
button.style.opacity = 0.7;
button.onclick = function (e)
//当点击搜索按钮时，先清除上次搜索时留下的标注，然后再进行地理位置的搜索
for (var i = 0; i < aa.length; i++)

         map.removeOverlay(aa[i]);
      

serachMap();

input.onkeyup = input.onkeydown = function (e)

   var a = e || window.event;
  
   if (a.keyCode == "13") 

//当有回车键按下时，先清除上次搜索时留下的标注，然后进行搜索
for (var i = 0; i < aa.length; i++)

         map.removeOverlay(aa[i]);
       
      serachMap();
   

document.body.appendChild(divs);

建立好动态弹窗同时给弹窗添加了点击事件和键盘按下事件，利用百度地图中的检索函数，其具体实现发放如下：
var aa = [];//这个是一个全局变量数组用于存储标注，便于在下次搜索之前在地图页面进行移除
function serachMap()
var area = document.getElementByIdx_x(“input”).value;

var ls = new BMap.LocalSearch(map);

ls.setSearchCompleteCallback(function (rs)
if (ls.getStatus() == BMAP_STATUS_SUCCESS)
var poi = rs.getPoi(0);

       if (poi) 
          var rePoint = new BMap.Point(poi.point.lng, poi.point.lat);
          map.centerAndZoom(rePoint, 13);
          var remarker = new BMap.Marker(rePoint);
          aa.push(remarker);
         map.addOverlay(remarker);
        
          remarker.setLabel(new BMap.Label(area,  offset: new BMap.Size(20, -10) ));
       
   
);
ls.search(area);

这样就可以实现让用户快速的找到大概的目的位置，有效的提升用户体验，为了在地图显示时检索框业同时显示出来，还必须在在ji中添加如下语句：
createDialog(aa);//aa是上面定义的一个全局数组，在页面加载完成时会触发这个函数。