如圖所示，直接呼叫百度地圖的全域性搜尋方法，預設返回結果為圖1所示：

圖1

但是搜尋結果的標註點所對應的資訊視窗樣式比較單調，且不滿足業務需要，因此通過官方API提供的方法來修改標註點對應的資訊視窗的樣式：

將用到LocalSearch類的回撥函式，如圖2所示：

圖2

//為搜尋結果的標註點新增事件

Var local = new BMap.LocalSearch(map, {

renderOptions:{map: map,selectFirstResult:false},

//自定義marker事件  

    onMarkersSet:function(pois){  

        for(var i=0;i<pois.length;i++){  

            (function(){  

                var index=i;  

                var curPoi=pois[i];  

                var curMarker=pois[i].marker;  

                var content="";  

                content="<div>名稱:"+curPoi.title+"</div>";  

                content+="<div>地址:"+curPoi.address+"</div>";  

                content+='<input type="hidden" name="lng" value="'+curPoi.point.lng+'"><input type="hidden" name="lat" value="'+curPoi.point.lat+'"><input type="hidden" name="address" value="'+curPoi.address+'">

<input type="button" onclick="quedingAddress(this)" value="選擇地點">';  

                curMarker.addEventListener('click',function(event){  

                    //showAtrributes(event);  

                    var info=new BMap.InfoWindow(content);  

                    curMarker.openInfoWindow(info);  

                    var position=curMarker.getPosition();  

//                     document.getElementById("mapx").innerHTML="拖拽後中心x位置:"+position.lng;    

//                     document.getElementById("mapy").innerHTML="拖拽後中心y位置:"+position.lat;    

//document.getElementById("level").innerHTML="縮放等級:"+this.getZoom();    

                      

                });  

            })();  

        }  

    }

});

}
 

結果如圖3

圖3