百度地图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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
javascript 禁止复制网页
Jun 11 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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之第七天
2006/10/09 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
Js 中debug方式
2010/02/07 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
Vue 中axios配置实例详解
2018/07/27 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
python字典的常用操作方法小结
2016/05/16 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
劳动竞赛活动方案
2014/02/20 职场文书
学校春季防火方案
2014/06/08 职场文书
安全生产月标语
2014/10/07 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
java实现web实时消息推送的七种方案
2022/07/23 Java/Android