先看效果

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>