【百度地图API】如何制作孪生姐妹地图?
任务描述:
我想要两张一模一样的地图!我想要双子地图!我想要孪生姐妹地图!
好好好,统统满足大家!
在这里我不需要使用百度地图API提供的地图缩略图控件,而是自己动手做一对双胞胎地图!
如何实现?
创建两张地图,map1和map2,他俩的中心点和地图级别(放大倍数)不同。
当鼠标移动map1的中心点时,map2的中心点会随着一起变化,最终和map1的中心点一致。
同理,可以实现用鼠标滚轮放大缩小地图。
操作试试:
移动左边的地图,右边的地图会随着一起运动;
对左边的地图使用鼠标滚轮(中键),右边的地图也会放大或者缩小。
图示:

运行代码,请点击这里。
代码:

代码
map2.centerAndZoom(point2,12); // 初始化地图map2,让地图级别和map1一致。
map1.addEventListener("moveend",function(){map2.panTo(map1.getCenter());}); //让map2跟着map1走
map1.addEventListener("zoomend",function(){map2.zoomTo(map1.getZoom());}); //让map2的地图等级与map1一致
map1.enableScrollWheelZoom(); // 启用滚轮放大缩小
</script>
</html>
【百度地图API】如何制作孪生姐妹地图?的更多相关文章
- 【百度地图API】如何制作商圈地图?行政地图?
原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...
- 【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
- 百度地图API详解之自定义地图类型
http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...
- android菜鸟学习笔记31----Android使用百度地图API(二)获取地理位置及地图控制器的简单使用
1.获取当前地理位置: Android中提供了一个LocationManager的类,用于管理地理位置.不能通过构造函数获取该类的实例,而是通过Context的getSystemService(): ...
- 【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...
- 通过百度地图API显示当前位置在地图上(图标显示)--第三方开源--百度地图(二)
1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...
- jvectormap地图开发和制作任意国家地图
jvectormap官网上提供了世界地图和很多国家的地图,但不是所有国家的地图都有,比如沙特阿拉伯的国家地图就没有,怎么办呢? 在http://www.amcharts.com/svg-maps/上下 ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板?
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
- 乐卡上海网点地图制作心得 | 百度地图API使用心得
前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...
随机推荐
- IBatis.Net获取执行的Sql语句
前言 IBatis.Net中Sql语句是些在配置文件中的,而且配置文件是在程序启动时读取的(我们开发的时候需要将其设置成较新复制或者是始终复制),而不是程序将其包含在其中(例如NHibernate的映 ...
- 说说PHP的autoLoad自动加载机制
__autoload的使用方法1: 最经常使用的就是这种方法,根据类名,找出类文件,然后require_one 复制代码 代码如下:function __autoload($class_name) { ...
- XCL-Charts绘画面积图(AreaChart) 例1
样本区域地图,发现区域图的时候把做向上注视位置图更具优势的管理.在改变. 区域图网格和轴是不一样的处理与其它图, 它是用来表示其影响范围的覆盖范围,车桥无段伸出. 在这里下处理. watermark/ ...
- CentOS7 防火墙 firewall-cmd
最小化安装 CentOS7 后,很多端口默认是不打开的,需要通过 firewall-cmd 把这些端口打开. 检查防火墙状态 # firewall-cmd --state running 关闭防 ...
- 何时使用SET和SELECT为变量赋值
原文:何时使用SET和SELECT为变量赋值 我们经常使用SET和SELECT来为变量复制,但是有时候,只能选其一来使用,下面来看看这些例子,本例中使用AdventureWorks数据库来做演示. 通 ...
- oracle 创建字段自增长——两种实现方式汇总(转)
mysql等其他数据库中有随着记录的插入而表ID自动增长的功能,而oracle却没有这样的功能,我们有以下两种方式可以解决字段自增长的功能. 因为两种方式都需要通过创建序列来实现,这里先给出序列的创建 ...
- 使用一个T-SQL语句批量查询数据表占用空间及其行数
原文:使用一个T-SQL语句批量查询数据表占用空间及其行数 要找到数据库中数据表占用的空间和存在的行数.可以使用sp_spaceused搭配数据表的名称.就可以产生该表耗用的空间和现有行数. 如: U ...
- Android笔记 之 旋转木马的音乐效果
一.前言-- 大家一定在百度音乐上在线听过歌,有没有注意到那个旋转唱片-- 就上面那个,当音乐在播放的时候,那个光碟轮子在转,就想旋转木马一般.感觉好好玩啊. 碰巧想起前阵子做音乐播放器,哎,那这个也 ...
- 设计管理员表;webservice用于网络安全的高端内提供服务的
admin表设计.你应该有角色表,管理员属于一个样的作用,另一个接口选项,以查看表.角色有更多的选择的能力. 角色和选项代表了许多关系,因此,我们必须保持这种关系有一个表 版权声明:本文博客原创文章, ...
- Android:创建耐磨应用 - 定义自己的布局
创建自己的自定义布局(Creating Custom Layouts) 本文介绍如何创建自己的自定义通知和使用可穿戴UI库来创建自己的自定义布局同时你还需要知道耐磨设计标准(Wear Design P ...