使用百度地图API在页面添加百度地图应用
2016-05-20 09:46
429 查看
目录:
页面预览
准备工作
代码实现
相关链接
本文我们使用百度提供的地图API,通过8行代码就可在自己的网页引入百度地图的应用。操作十分便捷,功能又十分强大。
很多时候我们希望在自己的页面中嵌入一个地图应用,方便向他人直观地提供自己的位置信息。本文我们利用百度提供的api,在自己的网页中嵌入百度地图的应用。完成后界面预览如上图所示,当然我们这里只关注图中百度地图那一块。
该套API免费对外开放。自v1.5版本起,需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。
申请秘钥的过程十分简单,如下列出大致过程,首先你要有一个百度账号,切记。
点击上文中申请秘钥的链接,然后点击图中的申请秘钥执行下一步
如果你还未成为百度开发者,你需要首先称为一名百度开发者,按照步骤完善信息即可。
接下来点击创建应用。
应用名称填上自己的应用名称就可以了,应用类型可以选择浏览器端,下面的Referer白名单参见下面的说明。我们这里作为学习使用,填写一个英文半角的*就OK了。接下来点击提交。
OK,获得秘钥,就是访问应用(AK)下面的那一串序列号。可以先copy下来备用。
(1)插入JavaScript API
(2)插入地图块
(3)插入JS代码创建地图应用
特别注意,以上代码中的
另外为了提高网页的加载速度,我们可以将上述代码放在
这样就可以了。
代码第2行创建一个Map实例;
代码第3行创建一个Point位置实例,为了确定自己位置的坐标,可以访问
代码第4行设定地图的中心点,以及缩放级别,缩放级别会在确定位置坐标的网站上显示,这里采用的是19级。
代码第6~8行,为了更加清晰地指明自己的位置信息,我们在地图上添加一个Marker,同时让它跳动起来。见预览图片,中间红色的Marker指向我们要定位的点,同时会更加醒目地跳动。
代码第9行,开启鼠标滚轮对地图缩放的控制。
至此大功告成。引入百度地图JS API,然后通过短短8行代码就可在页面中实现一个百度地图的应用。完整代码如下(只包含地图应用,省略了预览图片中的其他部分):
将以上代码复制到html页面中双击运行就行了。注意,要将以上代码中相应的位置填入你自己的秘钥!
另外需要特别说明的一点是,如果没有给地图指定高度,可能不会在页面中显示,所以最好手动设置地图的高度。
更多参考百度api文档http://developer.baidu.com/map/jsdemo.htm
页面预览
准备工作
代码实现
相关链接
本文我们使用百度提供的地图API,通过8行代码就可在自己的网页引入百度地图的应用。操作十分便捷,功能又十分强大。
1、页面预览
很多时候我们希望在自己的页面中嵌入一个地图应用,方便向他人直观地提供自己的位置信息。本文我们利用百度提供的api,在自己的网页中嵌入百度地图的应用。完成后界面预览如上图所示,当然我们这里只关注图中百度地图那一块。
2、准备工作
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助我们在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。该套API免费对外开放。自v1.5版本起,需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。
申请秘钥的过程十分简单,如下列出大致过程,首先你要有一个百度账号,切记。
第一步:
点击上文中申请秘钥的链接,然后点击图中的申请秘钥执行下一步
第二步:
如果你还未成为百度开发者,你需要首先称为一名百度开发者,按照步骤完善信息即可。
第三步:
接下来点击创建应用。
第四步:
应用名称填上自己的应用名称就可以了,应用类型可以选择浏览器端,下面的Referer白名单参见下面的说明。我们这里作为学习使用,填写一个英文半角的*就OK了。接下来点击提交。
第五步:
OK,获得秘钥,就是访问应用(AK)下面的那一串序列号。可以先copy下来备用。
3、代码实现
插入百度地图的方法十分简单。(1)插入JavaScript API
(2)插入地图块
(3)插入JS代码创建地图应用
(1)插入JavaScript API
在页面<head></head>标签对中引入如下百度地图JS API:
<!-- baidu Map api --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>
特别注意,以上代码中的
ak=秘钥处,秘钥即为准备工作中申请的秘钥,对应复制替换
秘钥二字即可。
另外为了提高网页的加载速度,我们可以将上述代码放在
<body></body>标签对中的最后。这样会提升页面的加载速度,但是地图应用的加载时间同样会依赖于以上文件的载入速度。
(2)插入地图块
我们只需要在插入地图应用的位置,插入一个div块即可,同时设定一个id供后续使用,方式如下:<div id="baiduMap"><div>
这样就可以了。
(3)插入JS代码创建地图应用
在<body></body>的末尾插入以下JavaScript代码段:
<script type="text/javascript"> var map = new BMap.Map("baiduMap"); //创建Map实例 var point = new BMap.Point(114.419915,30.513719); //创建Point位置实例 map.centerAndZoom(point, 19); //设置地图中心点及缩放级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 var marker = new BMap.Marker(point); //创建一个Marker点 map.addOverlay(marker); //将Marker点覆盖到地图上 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //使Marker点跳动起来 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script>
代码第2行创建一个Map实例;
代码第3行创建一个Point位置实例,为了确定自己位置的坐标,可以访问
http://api.map.baidu.com/lbsapi/getpoint/index.html在上面确定自己位置的坐标。
代码第4行设定地图的中心点,以及缩放级别,缩放级别会在确定位置坐标的网站上显示,这里采用的是19级。
代码第6~8行,为了更加清晰地指明自己的位置信息,我们在地图上添加一个Marker,同时让它跳动起来。见预览图片,中间红色的Marker指向我们要定位的点,同时会更加醒目地跳动。
代码第9行,开启鼠标滚轮对地图缩放的控制。
至此大功告成。引入百度地图JS API,然后通过短短8行代码就可在页面中实现一个百度地图的应用。完整代码如下(只包含地图应用,省略了预览图片中的其他部分):
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#baiduMap {width: 90%;height: 90%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <!-- baiduMap api --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script> </head> <body> <div id="baiduMap" class="col-md-6"></div> <!-- baiduMap --> <script type="text/javascript"> var map = new BMap.Map("baiduMap"); //创建Map实例 var point = new BMap.Point(114.419915,30.513719); //创建point位置 map.centerAndZoom(point, 19); //设置地图中心点及缩放级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 var marker = new BMap.Marker(point); //创建一个Marker点 map.addOverlay(marker); //将Marker点覆盖到地图上 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //使Marker点跳动起来 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script> </body> </html>
将以上代码复制到html页面中双击运行就行了。注意,要将以上代码中相应的位置填入你自己的秘钥!
另外需要特别说明的一点是,如果没有给地图指定高度,可能不会在页面中显示,所以最好手动设置地图的高度。
4、相关链接
我们这里仅仅使用了百度地图api的一小部分,实际上其功能十分强大。比如GPS定位功能,全景地图功能,个性化地图设置等功能。更多参考百度api文档http://developer.baidu.com/map/jsdemo.htm
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享