實現代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Cache-Control" content="no-store" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title></title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=e3ZohdqyB0RL98hFOiC29xqh"></script> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> function initMap(){ createMap();//創建地圖 setMapEvent();//設置地圖事件 } //創建地圖函數： function createMap(){ var map = new BMap.Map("BaiduDitu");//在百度地圖容器中創建一個地圖 map.centerAndZoom('上海',11);//設定地圖的中心點和坐標並將地圖顯示在地圖容器中 window.map = map;//將map變量存儲在全局 } //地圖事件設置函數： function setMapEvent(){ map.enableDragging();//啟用地圖拖拽事件，默認啟用(可不寫) map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小 map.enableDoubleClickZoom();//啟用鼠標雙擊放大，默認啟用(可不寫) map.enableKeyboard();//啟用鍵盤上下左右鍵移動地圖 } $(function(){ initMap();//創建和初始化地圖 createSearch(); createAutocomlete(); $("#s_p_search_btn").click(function () { searchPlace($("#searchplace").val()); }); }); function createSearch() { var map = window.map; var local = new BMap.LocalSearch(map, { renderOptions: { map: map, panel: "searchlist" } }); window.local = local; } //搜索 function searchPlace(value) { window.local.search(value); } function createAutocomlete() { var map = window.map; var ac = new BMap.Autocomplete( //建立一個自動完成的對象 { "input": "searchplace", "location": map }); ac.addEventListener("onconfirm", function (e) { //鼠標點擊下拉列表后的事件 var _value = e.item.value; var addr =_value.business+ _value.province + _value.city + _value.district + _value.street + _value.streetNumber ; searchPlace(addr); }); } </script> </head> <body class="easyui-layout"> <div class="Ditumap"> <div style="margin-bottom:10px;"> <input id="searchplace" style="width: 550px;" class="easyui-textbox-simple" placeholder="輸入搜索關鍵字" /> <a id="s_p_search_btn" href="#" class="easyui-linkbutton" style="width: 80px;" iconcls="icon-search">搜索</a> </div> <div id="searchlist" style="width: 350px; height: 460px; margin-right:10px; float:left;"></div> <div style="width:600px;height:460px;border:none; float:left;" id="BaiduDitu"></div> <div style="clear:both;"></div> </div> </body> </html>
瀏覽器顯示結果：
