Web页面中使用百度地图

很多时候我们希望在自己的页面中嵌入一个地图应用，方便向他人直观地提供自己的位置信息。本文我们利用百度提供的api，在自己的网页中嵌入百度地图的应用。完成后界面预览如上图所示，当然我们这里只关注图中百度地图那一块。

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助我们在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
该套API免费对外开放。自v1.5版本起，需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。
申请秘钥的过程十分简单，如下列出大致过程，首先你要有一个百度账号
第一步：
点击上文中申请秘钥的链接，然后点击图中的申请秘钥执行下一步
第二步：
如果你还未成为百度开发者，你需要首先称为一名百度开发者，按照步骤完善信息即可。
第三步：
接下来点击创建应用。
第四步：
应用名称填上自己的应用名称就可以了，应用类型可以选择浏览器端，下面的Referer白名单参见下面的说明。我们这里作为学习使用，填写一个英文半角的*就OK了。接下来点击提交。
第五步：
OK，获得秘钥，就是访问应用(AK)下面的那一串序列号。可以先copy下来备用。

一个引用百度地图api的位置定点的代码
//v2.0版本的引用方式：src=“http://api.map.baidu.com/api?v=2.0&ak=您的密钥”

<style type="text/css">  
	html{
		height:100%;
	}  
	body{
		height:100%;
		margin:0px;
		padding:0px
	}  
	#container{
		height:100%;
	}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=vtj2ymrDQxSeN2vH0tHW6bqtEyPAvkVu">

</script>

<div id="container"></div> 
<script type="text/javascript"> 
// 创建地图实例  
var map = new BMap.Map("container");
// 创建点坐标 
var point = new BMap.Point(112.144146,32.042426);
// 初始化地图，设置中心点坐标和地图级别   
map.centerAndZoom(point, 15);
map.addControl(new BMap.NavigationControl()); //平移缩放控件
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //缩略地图
map.addControl(new BMap.MapTypeControl()); //地图类型
map.setCurrentCity("襄阳"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

// 鼠标点击显示位置
var geoc = new BMap.Geocoder();    
map.addEventListener("click", function(e){        
    var pt = e.point;
    geoc.getLocation(pt, function(rs){
        var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });        
});
</script>