百度地图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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
jquery键盘事件介绍
Jan 31 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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
Terran剧情介绍
2020/03/14 星际争霸
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
详解python里的命名规范
2018/07/16 Python
python中reader的next用法
2018/07/24 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
护士医德医风心得体会
2016/01/25 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
Python中的变量与常量
2021/11/11 Python