百度地圖經緯度轉換及關鍵字輸入提示

要使用百度地圖的插件首先得有一個百度地圖的帳號，用這個帳號到百度地圖LBS開發平臺（網址：http://lbsyun.baidu.com/apiconsole/key?application=key?from=developer）上申請一個ak值（2.0版本以上的使用ak值）；

申請好ak值以後，在你的項目中引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密碼"></script>

便可使用百度地圖的插件啦！

 

先在html中建立一個div容器放置地圖,如：

<div id="container" > </div>

 

咱們還須要一個地址框來輸入地址：

<input id="address" name="address" type="text" value="" >

 

在地址框下方增長一個div來放置關鍵字輸入提示的信息

<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

 

一個經度框和一個維度框來顯示獲取的經緯度：

經度：<input id="lng" name="lng" type="text"  readonly> - 緯度：<input id="lat" name="lat" type="text"  readonly>

 

還有一個查詢按鈕：

<a id="query_button" href="javascript:void(0);">查詢</a>

 

如今在js中就能夠調用地圖類了

/*調用地圖*/

var map = new BMap.Map("container");

//啓動地圖的縮小功能已及拖曳功能

map.enableScrollWheelZoom();//啓用滾輪放大縮小，默認禁用

map.enableContinuousZoom();//啓用慣性拖曳，默認禁用

//添加上縮放的平移控件，縮略圖控件以及設置顯示的位置

map.addControl(new BMap.NavigationControl());

map.addControl(new BMap.OverviewMapControl());

map.addControl(new BMap.OverviewMapControl({ isOpen:true, anchor:BMAP_ANCHOR_TOP_RIGHT}));//右下角打開

//根據IP定位城市
var myCity = new BMap.LocalCity();
myCity.get(myFun);
function myFun(result){
    map.centerAndZoom(result.name,15);
    var p = {'point':result.center};
    $("#lng").val(p.point.lng);
    $("#lat").val(p.point.lat);
    //建立逆向地址解析類
    var gc = new BMap.Geocoder();
    //獲取地址信息
    gc.getLocation(p.point, function(rs){
        var addComp = rs.addressComponents;
        addr = addComp.province + addComp.city ;
        ac.setInputValue(addr);//設置地址搜索框的默認值
        //建立標註
        var marker = new BMap.Marker(new BMap.Point(p.point.lng, p.point.lat)); // 建立標註，爲要查詢的地址對應的經緯度
        map.addOverlay(marker);
        var content = addr + "<br/><br/>經度：" + p.point.lng + "<br/>緯度：" + p.point.lat;
        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
        marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});
    });
}

 

如今咱們建立了地圖而且設置了地圖的一些屬性，以及根據ip地址初始化了地圖所在城市並建立標註；

接下來咱們要建立一個有地址到經緯度的查詢

var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport();
//查詢函數
function searchByStationName(keyword){
    localSearch.setSearchCompleteCallback(function(searchResult){
        var poi = searchResult.getPoi(0);
        if(poi){
            map.clearOverlays();
            $("#lng").val(poi.point.lng);
            $("#lat").val(poi.point.lat);
            map.centerAndZoom(poi.point, 15);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 建立標註，爲要查詢的地址對應的經緯度
            map.addOverlay(marker);
            var content = $("#location").val() + "<br/><br/>經度：" + poi.point.lng + "<br/>緯度：" + poi.point.lat;
            var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
            marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});
        }else{
            alert("請您輸入正確可識別的地址！");
        }
    });
    localSearch.search(keyword);

}

 

建立了基本的從地址到經緯度的查詢之後，咱們要增添一個功能：即咱們在地址框輸入某個關鍵字如：東莞市 時，在地址框下方會出現一個

提示框

//創建一個提示自動完成的對象
var ac = new BMap.Autocomplete({
    "input" : "location",
    "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;
    $("#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;
    $("#searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    
    searchByStationName(myValue);

});

 

$(function(){
    //當單擊查詢按鈕時觸發查詢
    $("#query_button").bind('click', function(){
        var keyword = $("#location").val();
        if(keyword.length > 0){
            searchByStationName(keyword);
        }
    });
});