百度地图api如何使用


Posted in Javascript onAugust 03, 2015

如果想用百度地图api,首先需要先获取一个百度地图api的密钥,然后引入百度地图的api,接下来,我们详细介绍下获取、引入api密钥的技巧,以及通过代码给大家详解下百度地图api如何使用,具体请看下文。

首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥。

申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了。

接下来,就是引入百度地图的api

关键代码如下:

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false"></script>

接下来我们就可以创建一个地图试试看了。(Js代码)
var map = new BMap.Map("container");          // 创建地图实例

var point = new BMap.Point(120.391655,36.067588);  // 创建点坐标

map.centerAndZoom(point, 15);

//map.centerAndZoom("北京", 15);

//map.centerAndZoom("Hongkong", 15);    
           
这里需要说明三点:

1.map.centerAndZoom方法创建地图,第一个参数可以是根据之前创建好的一个点为中心,创建出地图,也可以根据城市地区的中文名称创建地图。(如果拼写正确,可以根据城市的英文名称来创建)

2. map.centerAndZoom第二个参数是地图缩放级别,最大为19,最小为0。(但实际当缩小到3的时候就已经。。。)

百度地图api如何使用百度地图api如何使用

3.BMap.Map方法创建地图时候需要一个容器(地图会根据容器的大小自动进行调整。),填写相关容器的id。

关于地图大小:

可以通过

map.setZoom();

方法主动控制地图大小级别。

也可以通过设置

map.enableScrollWheelZoom(true);

利用鼠标滚轮控制大小。

百度地图提供了非常丰富的功能空间共我们使用。

1.Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。

2.NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。

3.OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。

4.ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。

5.MapTypeControl:地图类型控件,默认位于地图右上方(地图,卫星,三维)。

6.CopyrightControl:版权控件,默认位于地图左下方。

7.GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方。

效果图

百度地图api如何使用 

map.addControl(new BMap.NavigationControl());//缩放平移控件

map.addControl(new BMap.ScaleControl());    //比例尺

map.addControl(new BMap.OverviewMapControl());//缩略图

map.addControl(new BMap.MapTypeControl()); //地图类型

map.setCurrentCity("青岛");

注意:当设置城市信息时,MapTypeControl的切换功能才能可用

地图事件:
百度地图API中的大部分对象都含有addEventListener方法,我们可以通过该方法来监听对象事件。
实例:

map.addEventListener("click", function(){    

 alert("您点击了地图。");    

});

当我们不再希望监听事件时,可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。
map.removeEventListener("click", functionA);

map.addEventListener("click", functionA);

地图遮盖物:

Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。

Marker:标注表示地图上的点,可自定义标注的图标。

Label:表示地图上的文本标注,您可以自定义标注的文本内容。

Polyline:表示地图上的折线。

Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。

标注示例:

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 map.addOverlay(marker); 
 var point = new BMap.Point(120.387244,36.064835);
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口
 marker2.addEventListener("click", function(){
  this.openInfoWindow(infoWindow); 
 });

百度地图api如何使用

以上说明就是本文的全部内容,希望对大家使用百度地图api有所帮助。

Javascript 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
JS 树形递归实例代码
May 18 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
vue实现移动端拖动排序
Aug 21 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 #Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 #Javascript
javascript常见数据验证插件大全
Aug 03 #Javascript
javascript自定义in_array()函数实现方法
Aug 03 #Javascript
JavaScript简单修改窗口大小的方法
Aug 03 #Javascript
javascript实现随机读取数组的方法
Aug 03 #Javascript
JS实现选择TextArea内文本的方法
Aug 03 #Javascript
You might like
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript 循环调用示例介绍
2013/11/20 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
详解js的六大数据类型
2016/12/27 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
python通过文件头判断文件类型
2015/10/30 Python
Python中实现switch功能实例解析
2018/01/11 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
如何一键升级Python所有包
2020/11/05 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
大学老师推荐信
2014/02/25 职场文书
创建文明学校实施方案
2014/03/11 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
2015年暑期见闻
2015/07/14 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Python jiaba库的使用详解
2021/11/23 Python