在上前面电子围栏实现的基础添加地理位置检索的功能,即用户打开电子围栏设置时,根据想定位的地理位置来进行检索并在地图上进行标注。首先得在页面中动态的添加一个检索框,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是上面定义的一个全局数组,在页面加载完成时会触发这个函数。