百度地图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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
Jqprint实现页面打印
Jan 06 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 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下封装较好的数字分页方法
2010/11/23 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
js+css实现打字效果
2020/06/24 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python中给List添加元素的4种方法分享
2014/11/28 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
武汉某公司的C#笔试题面试题
2015/12/25 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
师范应届生求职信
2013/11/15 职场文书
升职自荐书范文
2013/11/28 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
投标授权委托书范文
2014/08/02 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
《开国大典》教学反思
2016/02/16 职场文书
财产分割协议书
2016/03/22 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang