调用百度地图前需要完成的步骤：
1.申请百度账号
2.申请密钥（AK）。
具体api文档请点击 百度地图JavaScript API 查看
点击进入上面链接后，如下图，点击获取密钥，然后点创建应用。
图1
里面的配置参数，我们按照描述来就好，如图，我们取名 test，应用类型选择浏览器端，然后设置白名单。点击提交 就生成了我们需要的密钥（AK）：
图3
3.用上一步生成的密钥，我们就可以调用百度地图实现我们的地图功能了。
代码如下：
// 以下代码是本人根据以前做的项目整理出来的，纯属手写，如有不规范处还请指出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.map{width: 500px;height: 500px;border:1px solid #666;float:left;}
.txt{float:left;margin-left:20px;}
input{width: 200px;height: 30px;display: block;margin-bottom:10px;border:1px solid #ccc;}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="txt" class="txt">
<input type="text" id="keyword" placeholder="请输入关键字">
<input type="text" id="province" placeholder="显示具体省" readonly style="background: #dcdcdc;">
<input type="text" id="city" placeholder="显示具体市" readonly style="background: #dcdcdc;">
<input type="text" id="address" placeholder="显示具体地址" readonly style="background: #dcdcdc;">
</div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SoacLT8htV8B0rzsZ0PR2aLmnB0h0pRP"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript">
window.onload=function(){
var oKeyword = document.getElementById("keyword");
var oProvince = document.getElementById("province");
var oCity = document.getElementById("city");
var oAddress = document.getElementById("address");
var foo = {
//后面的操作，都是把地址信息填入这个address，所以传给后台的时候就可以直接传这个数据
address : {
province : '',
provinceCode : '0',
city : '',
cityCode : '0',
district : '',
districtCode : '0',
longitude : '',
latitude : ''
},
// 根据point来初始化地图
initMap : function(lng,lat){
var _this = this;
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(lng, lat) // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
// 地图的一些配置项
var navigationControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT, // 靠左上角位置
type: BMAP_NAVIGATION_CONTROL_LARGE, // LARGE类型
enableGeolocation: true // 启用显示定位
});
map.addControl(navigationControl);// 缩放标尺
// 添加中心小红点
var centerPoint = new BMap.Marker(point);
map.addOverlay(centerPoint);
// 当前位置写入右侧input
var myGeo = new BMap.Geocoder();
myGeo.getLocation(new BMap.Point(lng, lat),function (result) {
_this.callBack(result,'drag')
});
_this.dragMap(map,centerPoint); //添加拖拽事件
//建立一个自动完成的对象，keyword出现下拉选择
var ac = new BMap.Autocomplete({
"input" : "keyword",
"location" : map
});
ac.addEventListener("onconfirm", function(e) {
// console.log(e)
var thisValue = e.item.value;
// console.log(thisValue)
var thisProvince = thisValue.province;
var thisCity = thisValue.city;
var thisDistrict = thisValue.district;
var thisStreet = thisValue.street;
var thisStreetNumber = thisValue.streetNumber;
var thisBusiness = thisValue.business;
var thisKey = thisProvince+thisCity+thisDistrict+thisStreet+thisStreetNumber+thisBusiness;
_this.searchByKey(map,thisKey,centerPoint);
})
},
// 地图拖拽
dragMap : function(map,centerPoint){
var _this = this;
var myGeo = new BMap.Geocoder();
map.addEventListener("dragging", function showInfo() {
var cp = map.getCenter();
centerPoint.setPosition(new BMap.Point(cp.lng, cp.lat));
map.panTo(new BMap.Point(cp.lng, cp.lat));
map.centerAndZoom(centerPoint.getPosition(), map.getZoom());
});
map.addEventListener("dragend",function showInfo() {
var cp = map.getCenter();
myGeo.getLocation(new BMap.Point(cp.lng, cp.lat),function (result) {
// console.log(result)
centerPoint.setPosition(new BMap.Point(cp.lng, cp.lat));
map.panTo(new BMap.Point(cp.lng, cp.lat));
map.centerAndZoom(centerPoint.getPosition(), map.getZoom());
_this.callBack(result,'drag')
});
});
},
// 地图拖拽后 和 输入关键字后选择 的回调函数
callBack : function(result,tag){
var _this = this;
var thisAddress = result.addressComponents;
if(thisAddress.province == "新疆维吾尔自治区" || thisAddress.province == "西藏自治区"){
alert("很抱歉，新疆和西藏地区暂不支持该服务，敬请期待。");
oKeyword.value = "";
oProvince.value = "";
oCity.value = "";
oAddress.value = "";
}else{
if(tag==='drag'){
oKeyword.value = result.address;
}
oProvince.value = thisAddress.province;
oCity.value = thisAddress.city;
oAddress.value = thisAddress.district + thisAddress.street + thisAddress.streetNumber;
// console.log(result);
_this.address.province = thisAddress.province;
_this.address.city = thisAddress.city;
_this.address.district = thisAddress.district;
_this.address.longitude = result.point.lng;
_this.address.latitude = result.point.lat;
}
console.log(JSON.stringify(_this.address))
},
// 输入关键字搜索，根据关键字更新地图并获取信息
searchByKey : function(map,keyword,centerPoint){
var _this = this;
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport();
localSearch.search(keyword);
localSearch.setSearchCompleteCallback(function (searchResult) {
if(searchResult && searchResult.getPoi(0)){
var poi = searchResult.getPoi(0);
if(poi.point){
map.centerAndZoom(poi.point,15);
centerPoint.setPosition(poi.point);
var myGeo = new BMap.Geocoder();
myGeo.getLocation(poi.point, function(result){
_this.callBack(result)
});
}
}
})
},
// 一般初始化地图，设置北京天安门
init : function(){
_this.initMap(116.404,39.915)
},
// 初始化当前城市
initLocalCity : function(){
var _this = this;
var map = new BMap.Map("map");
var myCity = new BMap.LocalCity();
myCity.get(function(result){
console.log(result);
// var point = result.center;
var lng = result.center.lng;
var lat = result.center.lat;
_this.initMap(lng,lat)
});
},
// 初始化当前位置
initLocalPoint : function(){
var _this = this;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// console.log(lng+':'+lat);
var gpsPoint = new BMap.Point(lng, lat);
// 坐标转成百度需要的坐标，并初始化地图
// gpsPoint：转换前坐标，第二个参数为转换方法，0表示gps坐标转换成百度坐标，callback回调函数，参数为新坐标点
BMap.Convertor.translate(gpsPoint, 0, function(data){
_this.initMap(data.lng,data.lat);
})
})
} else {
alert("Your browser does not support Geolocation!");
}
}
}
// foo.init(); //以北京初始化地图
foo.initLocalCity(); //以当前城市初始化地图
// foo.initLocalPoint(); //以当前坐标初始化地图
// 输入关键字的时候，清空input里面的城市信息
oKeyword.oninput=function(){
oProvince.value = "";
oCity.value = "";
oAddress.value = "";
}
}
</script>
</html>
效果图：
图4
上面代码每块注释都有，我就不分成一块一块说了，直接拷贝过去是可以运行的。下面笔者说下引入的两个js：
第一个是百度地图必须引入的js，后面的ak就是我们刚刚创建应用的密钥。
第二个js的功能是：当我们想 以当前位置初始化 地图的时候，我们用到了 getCurrentPosition，但是用 getCurrentPosition获取到的坐标是 GPS 经纬度坐标，而百度地图的坐标是经过特殊转换的，所以，在获取定位坐标和初始化地图之间需要进行一步坐标转换工作，该转换方法百度API里面已经提供了，转换一个点或者批量装换的方法均有提供：
单个点转换需引用 http://developer.baidu.com/map/jsdemo/demo/convertor.js
批量转换需引用 http://developer.baidu.com/map/jsdemo/demo/changeMore.js
所以这里我们引入了前者。
（但是笔者发现，用getCurrentPosition这个方法的时候，体验不是很好，初始化页面的时候地图加载很慢。笔者正在寻找更好的办法，后续再更新！）
