使用百度地图API在页面添加百度地图应用

原创 2016年05月20日 09:46:31

目录:

  • 页面预览
  • 准备工作
  • 代码实现
  • 相关链接

本文我们使用百度提供的地图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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a153375250/article/details/51459191

百度地图API_BMap接口的使用形式

想要在HTML中加载百度地图,使用js形式,先去申请个秘钥,然后输入ak=其他的跟HTML没啥区别,这里只说API部分。 创建实例:var map = new BMap.Map("allmap");...
  • liangwenrong
  • liangwenrong
  • 2017-04-02 14:07:58
  • 8693

百度地图API接口 地图标注 地址经纬度解析

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}  #l-map{height:100%;width:7...
  • wlinshan
  • wlinshan
  • 2016-05-10 12:34:15
  • 1249

Android之高德地图SDK配置及简单使用详解

需要用到的东西请去高德地图API官网下载本次教程是对比着高德官网的demo一步步添加东西,所以需要有一份demo就够了。1.打开高德地图的demo(AMap3DDemo),同时新建一个项目2.将dem...
  • ygd1994
  • ygd1994
  • 2016-05-17 17:40:10
  • 9729

百度地图API接口

公司项目需要,需要使用php,easyui开发,其中一个重要的功能是百度地图应该开发。 这个东西之前没有接触过,刚刚看别人写的应该,多少有点生疏。但总算也是入门了,在 此将关键的一些东西记录下来。...
  • L_yangliu
  • L_yangliu
  • 2016-01-17 11:10:29
  • 4492

百度地图api接口

  • 2012年09月04日 15:01
  • 808KB
  • 下载

百度地图(一)AK申请与给应用签名

百度地图前期准备,AK申请和给应用签名
  • fxzfz
  • fxzfz
  • 2015-06-12 22:12:03
  • 2983

【百度地图api·javascript】入门,在web中创建和使用百度地图api

简介 在web中内嵌地图是经常被提到的需求,可能是要求在web中加入地图展示公司的地址,可能是要求用户购买商品的时候能选择提货地址,或者需要在地图上标示出用户到达某个地点的路线。这里就开始介绍下百度地...
  • eightwhells
  • eightwhells
  • 2015-11-26 18:36:22
  • 19429

关于怎么使用百度地图API-实战

在网站开发过程中,我们有可能会用到地图类,这时候就能用到国内做得比较好的地图了,因为国外的有墙而且反应慢,远水不解近渴。 我其实是使用的百度的地图,这里就以百度的地图为例写一个小小的总结吧。 其实要是...
  • qq_26816591
  • qq_26816591
  • 2016-06-05 22:59:00
  • 1394

百度地图api调用

百度地图api调用 在html5网站中很多企业需要用到的企业地址位置。大多调用第三方的地图api来进行制作。 目前比较主流的第三方地图插件有百度、高德、腾讯、搜狗、谷歌(国内暂不支持)等,他们的引...
  • qq_35515563
  • qq_35515563
  • 2017-03-01 15:33:25
  • 1308

百度地图接口调用

百度地图apivar map; initMap(); //创建和初始化地图函数: function initMap() { createMap();//创建地图 setMapEvent...
  • AAA3A12
  • AAA3A12
  • 2015-09-17 22:36:12
  • 1296
收藏助手
不良信息举报
您举报文章:使用百度地图API在页面添加百度地图应用
举报原因:
原因补充:

(最多只允许输入30个字)