调用百度地图出现的自动创建完成对象会清空输入框值的问题

xiaoxiao2021-02-28  103

最近开发一个调用百度的页面用来定位搜索的,然后各种网上找,

map = new BMap.Map("container");//创建一个百度地图容器

map.centerAndZoom("上海市", 12);//初始化地图,12表示级别

也可以

var point = new BMap.Point(a, b);//ab代表经纬度

map.centerAndZoom(point, 12);

这样定位到你所想要的地址,然后添加各种控件,监听器什么的,百度地图api都有

举个例子:

map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件

addEventListener("onhighlight", function(e)//监听

当然这些都不是重点,最气人的就是添加一个搜索功能

var ac=new BMap.Autocomplete({ "input":"sjbdz_lianxdz", "location":map });

input绑定你输入的值

location表示搜索范围,然后会出现一个什么情况呢?

当你输入关键字提示后点击保存回清空input输入框的值。

然后初始化页面的时候就会一闪而过。网上搜索Autocomplete

初始化的时候就可以绑定搜索词。

上代码:

function baiduapi(){ map = new BMap.Map("container"); var a=document.getElementById("sjbdz_jingd").value; var b=document.getElementById("sjbdz_weid").value; if(a!=null && a!="" && b!=null && b!="" ){ var point = new BMap.Point(a, b); map.centerAndZoom(point, 12); }else{ map.centerAndZoom("上海市", 12); } var marker = new BMap.Marker(new BMap.Point(a, b));  // 创建标注,为要查询的地方对应的经纬度 map.addOverlay(marker); map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用 map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用 map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件 map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角,打开 localSearch = new BMap.LocalSearch(map); localSearch.enableAutoViewport(); //允许自动调节窗体大小 //智能搜索 /*  var ac = new BMap.Autocomplete(    //建立一个自动完成的对象 {"input" : "sjbdz_lianxdz" ,"location" : map }); */  ac=new BMap.Autocomplete({ "input":"sjbdz_lianxdz", "location":map }); var c=document.getElementById("sjbdz_lianxdz").value; ac.setInputValue(c); } 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(); }); function setPlace(){         function myFun(){                 var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果                 map.centerAndZoom(pp, 18);                 map.addOverlay(new BMap.Marker(pp));    //添加标注         }         var local = new BMap.LocalSearch(map, { //智能搜索          onSearchComplete: myFun         });         local.search(myValue); } 

转载请注明原文地址: https://www.6miu.com/read-21991.html

最新回复(0)