比例尺、缩略图、平移缩放之百度地图添加控件方法


Posted in Javascript onAugust 03, 2015

下面通过图文并茂的方式给大家详细介绍下比例尺、缩略图、平移缩放之百度地图添加控件方法。

地图控件概述

百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件,您还可以通过Control类来实现自定义控件。

地图API中提供的控件有:

Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。
OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。
MapTypeControl:地图类型控件,默认位于地图右上方。
CopyrightControl:版权控件,默认位于地图左下方。
GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方
向地图添加控件

可以使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如,要将标准地图控件添加到地图中,可在代码中添加如下内容:

var map = new BMap.Map("container");    

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    

map.addControl(new BMap.NavigationControl());

可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后,它们即刻生效。

map.addControl(new BMap.NavigationControl());    

map.addControl(new BMap.ScaleControl());    

map.addControl(new BMap.OverviewMapControl());    

map.addControl(new BMap.MapTypeControl());    

map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用

控制控件位置

初始化控件时,可提供一个可选参数,其中的anchor和offset属性共同控制控件在地图上的位置。

控件停靠位置 anchor表示控件的停靠位置,即控件停靠在地图的哪个角。当地图尺寸发生变化时,控件会根据停靠位置的不同来调整自己的位置。anchor允许的值为:
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。

比例尺、缩略图、平移缩放之百度地图添加控件方法

控件位置偏移

除了指定停靠位置外,还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同,那么控件可能会重叠在一起,这时就可以通过偏移值使二者分开显示。

本示例将比例尺放置在地图的左下角,由于API默认会有版权信息,因此需要添加一些偏移值以防止控件重叠。

var opts = {offset: new BMap.Size(150, 5)}    

map.addControl(new BMap.ScaleControl(opts));

修改控件配置

地图API的控件提供了丰富的配置参数,您可参考API文档来修改它们以便得到符合要求的控件外观。例如,NavigationControl控件就提供了如下类型:

BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。

BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。

BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。

BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。

下图从左向右依次展示了上述不同类型的控件外观:

比例尺、缩略图、平移缩放之百度地图添加控件方法

上图前4个为PC端平移缩放控件样式,最后一个为移动端缩放控件样式。

下面的示例将调整平移缩放地图控件的外观。

上图前4个为PC端平移缩放控件样式,最后一个为移动端缩放控件样式。

下面的示例将调整平移缩放地图控件的外观。

添加缩略图

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap{width:100%;height:500px;}
    #r-result{width:100%;margin-top:5px;}
    p{margin:5px; font-size:14px;}
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  <title>添加/删除地图类型、缩略图控件</title>
</head>
<body>
  <div id="allmap"></div>
  <div id="r-result">
    <input type="button" onclick="add_control();" value="添加" />
    <input type="button" onclick="delete_control();" value="删除" />
  </div>
  <p>点击地图类型控件切换普通地图、卫星图、三维图、混合图(卫星图+路网),右下角是缩略图,点击按钮查看效果</p>
</body>
</html>
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("allmap");
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

  var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
  var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});

  var overView = new BMap.OverviewMapControl();
  var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
  //添加地图类型和缩略图
  function add_control(){
    map.addControl(mapType1);     //2D图,卫星图
    map.addControl(mapType2);     //左上角,默认地图控件
    map.setCurrentCity("北京");    //由于有3D图,需要设置城市哦
    map.addControl(overView);     //添加默认缩略地图控件
    map.addControl(overViewOpen);   //右下角,打开
  }
  //移除地图类型和缩略图
  function delete_control(){
    map.removeControl(mapType1);  //移除2D图,卫星图
    map.removeControl(mapType2);
    map.removeControl(overView);
    map.removeControl(overViewOpen);
  }
</script>

效果图

比例尺、缩略图、平移缩放之百度地图添加控件方法

以上就是本文的全部内容,希望大家喜欢。

Javascript 相关文章推荐
封装了一个js图片轮换效果的函数
Sep 28 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
js获取form的方法
May 06 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 #Javascript
JavaScript图片轮播代码分享
Jul 31 #Javascript
简单实现异步编程promise模式
Jul 31 #Javascript
JavaScript数据类型判定的总结笔记
Jul 31 #Javascript
jquery代码实现多选、不同分享功能
Jul 31 #Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 #Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 #Javascript
You might like
Session的工作方式
2006/10/09 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
PHP学习之正则表达式
2011/04/17 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python3的输入方式及多组输入方法
2018/10/17 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
Ajax的工作原理
2015/12/04 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
函授本科毕业自我鉴定
2013/10/09 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
出差报告范文
2014/11/06 职场文书
初婚初育证明范本
2014/11/24 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏