帶搜尋欄的百度地圖-H5-搜尋
阿新 • • 發佈:2018-11-30
先看效果
HTML
<div class="contact-map-wrapper"> <div id="allmap" class="contact-map"></div> <div id="r-result"><input type="text" id="suggestId" size="20" value="百度" placeholder="搜地點、查公交、找路線" /></div> <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> </div>
CSS
.contact-map-wrapper{ position: relative; width: 100%; height: 582px; } .contact-map{ height: 100%; width: 100%; } .contact-map-wrapper #r-result { position: absolute; top: 0; left: 0; margin: 16px; height: 30px; width: 280px; } .contact-map-wrapper #r-result input{ height: 100%; width: 100%; line-height: 30px; background-color: #fff; padding: 0 8px; font-size: 14px; } #r-result input:focus{ border: 1px solid #3385ff; } #r-result input::-webkit-input-placeholder{ color: #999999; } #r-result input::-moz-placeholder{ color: #999999; } #r-result input:-ms-input-placeholder{ color: #999999; }
JS
<!-- 地圖 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script> <script type="text/javascript"> var map = new BMap.Map("allmap"); var point = new BMap.Point(126.65771686, 45.77322463); //地圖中心點,哈爾濱市 function mapFun() { // 百度地圖API功能 map.centerAndZoom(point, 15); // 初始化地圖,設定中心點座標和地圖級別。 map.enableScrollWheelZoom(true); //啟用滾輪放大縮小 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (r) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); var point = new BMap.Point(r.point.lng, r.point.lat); //地圖中心點,哈爾濱市 } else { alert('failed' + this.getStatus()); } }); } mapFun(); //搜尋 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(); }); function setPlace() { map.clearOverlays(); //清除地圖上所有覆蓋物 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); } </script>