很多时候我们希望在自己的页面中嵌入一个地图应用,方便向他人直观地提供自己的位置信息。本文我们利用百度提供的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>