要使用百度地图的插件首先得有一个百度地图的账号，用这个账号到百度地图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);
        }
    });
});