效果：  代碼如下圖所示： ```javascript <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BDAK"></script> <script> { var thetype = '0'; // 百度地圖API功能 var origin = ''; var destination = '廣西省北海潿洲島滴水丹屏125號'; var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); if(thetype==1){ var transit = new BMap.TransitRoute(map, { renderOptions: { map: map, panel: "r-result"} }); transit.search(origin, destination); } else if (thetype==2) { var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true}}); driving.search(origin, destination); } else if (thetype==3) { // 百度地圖API功能 //var map = new BMap.Map("l-map"); //map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true}}); walking.search(origin, destination); } //searchAssociativeWord(J.g("start")) /** * 搜索聯想詞 * @param int * @returns {boolean} */ function searchAssociativeWord(int){ if (!int) { return false; } var input = int, drop_box = $(".drop_box"), data_list = J.g("data_list"); var SELECTED = false; //判斷搜索框內的詞是否是選中的聯想詞; associativeWordSelect(); closeBtnEvent(); searchButtonClick(); input.on("input", function(){ var value = input.val(); if (value.replace(/(^\s*)|(\s*$)/g, "")=="") { clearDataList(); } if (SELECTED) SELECTED = false; }); //調用baidu Autocomplete API接口 var ac = new BMap.Autocomplete({ "input" : "start", "location" : map, //聯想成功回掉函數 onSearchComplete: function(results){ //如果該詞是選中聯想詞而填入搜索框的，不做聯想操作 if (SELECTED) { return; } // 判斷狀態是否正確 drop_box.show(); //baidu api接口如果設備是移動設備，只會返回6條數據 var data_len = results.si.length; var s = [], max_len, limit_len = 6; max_len = data_len<limit_len?data_len:limit_len; if (max_len) { data_list&&data_list.html(""); for (var i = 0; i < max_len; i++){ if (results.getPoi(i)) { s.push(results.getPoi(i).business); createSearchDataList(results.getPoi(i).business); } } SEARCHLIST = s; } else { clearDataList(); } } }); function createSearchDataList(title){ var key = input.val(); var n_title = title.replace(key, "<em>"+key+"</em>"); var list = J.create("li", { "data-html": title }).html(n_title); data_list.append(list); } function clearDataList(){ data_list&&data_list.html(""); drop_box&&drop_box.hide(); } //搜索按鈕點擊事件 function searchButtonClick(){ //綁定回車按鍵 J.g(document).on("keydown", function(e){ var key = e.which; if (key==13) { clearDataList(); //getPlacePoint(input.val()); e.preventDefault(); } }); function getPlacePoint(value){ var myGeo = new BMap.Geocoder(); var myValue = value; myGeo.getLocation(DESTPOINT, function(result){ PROVINCE = result.addressComponents.province; myGeo.getPoint(myValue, function(point){ if (point) { var start = { lng: point.lng, lat: point.lat } if (DIRECTION) { //反向 getBusRoute(DESTPOINT, start, myValue); } else { //正向 getBusRoute(start, DESTPOINT, myValue); } } else { importAssocWord(); headTitleShow("s_title"); navigationPanel.contSwitch(0); setTimeout(function(){ navigationPanel.show(); }, PANEL_TIME); T.trackEvent("track_" + J.site.info.pageName.toLowerCase() + "_nopoint_baiduapi_0"); } }, PROVINCE); }); } /** * 導入聯想詞到選擇面板 */ function importAssocWord(){ var dest_panel = J.g("dest_panel"), list = SEARCHLIST, len = list.length; dest_panel.s(".start_icon").eq(0).html(input.val()); dest_panel.s("li").each(function(i,v){ v.remove(); }); if (len > 0) { for (var i=0; i<len; i++) { if (list[i]==input.val()) { continue; } var li = J.create("li", {}).html(list[i]); dest_panel.append(li); } dest_panel.s("li").each(function(i,v){ v.on("click", function(e){ e.stop(); //解析地址獲取經緯度 //getPlacePoint(v.html()); input.val(v.html()); //因為替換input value會觸發input事件 clearDataList(); }) }); } } } /** * 關閉聯想詞按鈕點擊 */ function closeBtnEvent(){ J.g("drop_close")&&J.g("drop_close").on("click", function(e){ e.stop(); clearDataList(); }); } /** * 聯想詞點擊事件 */ function associativeWordSelect(){ J.g("data_list")&&J.g("data_list").on("click", function(e){ e = window.event || e; var target = J.g(e.target || e.srcElement); clearDataList(); //因為html中的內容被加過<i>標簽，所以使用data-html中的內容 J.g("start").val(target.attr("data-html")); SELECTED = true; }); } } </script> ```