百度地圖之自動提示--autoComplete
阿新 • • 發佈：2017-06-24
esp lan length aid time 下拉 html style log
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>百度地圖之自動提示--autoComplete</title> </head> <body> <buttonid="btn1">將深圳設置為檢索區域</button> <button id="btn2">將上海設置為檢索區域</button> <input id="register2suggestId" size="30" type="text" class="w-100-nick" placeholder="請輸入"/> <div id="register2map" style="width:300px;height:200px;"></div> <script src="http://api.map.baidu.com/api?v=2.0&ak=ZUHewhg0KDCnZa5emK9hxRib&callback=init"></script> <script> window.windowMapBusiness = { //創建和初始化地圖函數： initMap: function (id, addr, s) { this.createMap(id, addr, s);//創建地圖 this.setMapEvent();//設置地圖事件 this.addMapControl();//向地圖添加控件 }, //創建地圖函數： createMap:function (id, addr, s) { s = s ? s : 8; window.map = new BMap.Map(id);// 將map變量存儲在全局 在百度地圖容器中創建一個地圖 if (addr) { map.centerAndZoom(addr, s);//設定地圖的中心點和坐標並將地圖顯示在地圖容器中 } else { var geolocation = new BMap.Geolocation(); //實例化定位對象。 geolocation.getCurrentPosition(function (r) { //定位結果對象會傳遞給r變量 r.point.lng 經度 r.point.lat 緯度 if (this.getStatus() == BMAP_STATUS_SUCCESS) { //通過Geolocation類的getStatus()可以判斷是否成功定位。 map.centerAndZoom(r.point, s);//設定地圖的中心點和坐標並將地圖顯示在地圖容器中 var mk = new BMap.Marker(r.point); //基於定位的這個點的點位創建marker map.addOverlay(mk); //將marker作為覆蓋物添加到map地圖上 map.panTo(r.point); //將地圖中心點移動到定位的這個點位置。註意是r.point而不是r對象。 } else { map.centerAndZoom(‘廣東省深圳市‘, s);//設定地圖的中心點和坐標並將地圖顯示在地圖容器中 } }, {enableHighAccuracy: true}); } }, //地圖事件設置函數： setMapEvent: function () { map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小 map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖 //map.disableDragging(); //禁止拖拽 // map.enableDragging(); // 開啟拖拽 map.enableInertialDragging(); // 開啟慣性拖拽 }, //地圖控件添加函數： addMapControl: function (sc) { //向地圖中添加縮放控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地圖中添加縮略圖控件 if (sc) { var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地圖中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); } }, // 設置單個標註-有單行提示文字 addMarker: function (addr, sc, lf, top) { map.clearOverlays();//清除所有標註 new BMap.Geocoder().getPoint(addr, function (point) { if (point) { var sc = sc ? sc : 8, lf = lf ? lf : 10 - addr.length * 6,//百度地圖標註字體12px top = top ? top : -20, address = new BMap.Point(point.lng, point.lat); map.centerAndZoom(address, sc); var marker = new BMap.Marker(point); map.addOverlay(marker); marker.setLabel(new BMap.Label(addr, {offset: new BMap.Size(lf, top)})); } }); }, //處理地址--傳入地址、函數 處理經緯度等 執行環境window 賦值通過scope 如 $scope.Lon=point.lng; $scope.Lat=point.lat; responseAddr: function (addr, fun) { new BMap.Geocoder().getPoint(addr, function (point) { if (point) {//point.lng point.lat fun(point); } }); }, //百度地圖自動提示 -（未解決）還是檢索的上一次的區域 autoComplete: function (suggestId, setLocation, keywords, sc, lf, top) {// id必填 keywords-array 其余-string var me = this, //建立一個自動完成的對象 ac = new BMap.Autocomplete({ "input": suggestId, //輸入框id "location": setLocation//設定返回結果的所屬範圍 }), iptTrigger = document.getElementById(suggestId); //刪除多余的元素，但百度地圖自動生成的js報錯 報錯並不影響提示功能 暫設置為隱藏多余元素 function hideRestAcBox() { var elm = Array.prototype.slice.call(document.getElementsByClassName(‘tangram-suggestion-main‘)); if (elm.length) { elm.forEach(function (v, i) { // v.parentNode.removeChild(v); v.style.zIndex = -1; v.style.visibility = ‘hidden‘; }); elm[elm.length - 1].style.zIndex = 999; elm[elm.length - 1].style.visibility = ‘visible‘; } } function hideAcBox() { var elm = Array.prototype.slice.call(document.getElementsByClassName(‘tangram-suggestion-main‘)); elm.forEach(function (v, i) { v.style.zIndex = -1; v.style.visibility = ‘hidden‘; }); } //輸入框的值控制 提示信息列表容器顯示隱藏 function boxHide() { console.log(this.value); if (this.value) { if (keywords) {//發起某個關鍵字的提示請求，會引起onSearchComplete的回調 ac.search.apply(ac, keywords); } hideRestAcBox(); } else { hideAcBox(); } } iptTrigger.oninput = boxHide;//非ie iptTrigger.onpropertychange = boxHide;//ie //鼠標點擊下拉列表後的事件 ac.addEventListener("onconfirm", function (e) { hideAcBox(); var _value = e.item.value; var myValue = _value.province + _value.city + _value.district + _value.street + _value.business; console.log(myValue); me.addMarker(myValue, sc, lf, top); }); } }; document.getElementById(‘btn1‘).onclick = function () { console.log(1); windowMapBusiness.autoComplete(‘register2suggestId‘, ‘深圳市‘, [‘大廈‘, ‘樓‘, ‘大學‘, ‘校區‘, ‘學院‘, ‘中專‘, ‘中學‘, ‘小學‘, ‘幼兒園‘]); }; document.getElementById(‘btn2‘).onclick = function () { console.log(2); windowMapBusiness.autoComplete(‘register2suggestId‘, ‘上海市‘, [‘大廈‘, ‘樓‘, ‘大學‘, ‘校區‘, ‘學院‘, ‘中專‘, ‘中學‘, ‘小學‘, ‘幼兒園‘]); }; setTimeout(function () { windowMapBusiness.initMap(‘register2map‘, ‘深圳‘); }, 1000); </script> </body> </html>
百度地圖之自動提示--autoComplete