百度地图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 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
全面了解js中的script标签
Jul 04 Javascript
JS常用知识点整理
Jan 21 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
工作中常用到的ES6语法
Sep 04 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 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 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php实现文件下载代码分享
2014/08/19 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
js 替换
2008/02/19 Javascript
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
python实现清屏的方法
2015/04/30 Python
Python字符串替换实例分析
2015/05/11 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
学习python的前途 python挣钱
2019/02/27 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
个人简历的自荐信
2013/10/23 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
python实现简单的名片管理系统
2021/04/26 Python
python 字典和列表嵌套用法详解
2021/06/29 Python
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers