【百度地图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使用心得
前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...
随机推荐
- Microsoft Toolkit 2.5下载 – 一键激活Windows 8.1/2012 R2/Office 2013
http://www.dayanzai.me/microsoft-toolkit-2-5.html
- C# - is
Checks if an object is compatible with a given type. An is expression evaluates to true if the pr ...
- c++内存泄漏处理(积累)
写c++程序时,常常会出现内存泄漏的问题,这里从网上找了一种非常麻烦的方法:假设想找到每一个cpp文件的内存泄漏,都必须在每一个cpp加上例如以下代码: #include <crtdbg.h&g ...
- nodeJs基础
Node.js 是一个基于Chrome JavaScript 执行时建立的一个平台, 用来方便地搭建高速的 易于扩展的网络应用· Node.js 借助事件驱动, 非堵塞I/O 模型变得轻量和高效, 很 ...
- 容易centos配置docker维修
首先.由于docker实施需要linux某些组件支持本身和内核特性.所以一定要确保centos版本号大于6,和内核版本号大于2.6.32-431.可轻松升级centos6到最新的版本号. sudo y ...
- [HA]负载均衡:HAPROXY与KEEPALIVED强强联合
第一步:更改系统控制配置文件,同意分配虚拟IP(VIP) /etc/sysctl.conf net.ipv4.ip_nonlocal_bind=1 <pre style="word-w ...
- 手把手教你如何加入到github的开源世界! (转)
我曾经一直想加入到开源项目中,但是因为没有人指导流程,网上看了很多,基本都是说了个大概,如果你也是一个初出茅庐的人,那么,我将以自己提交的一次开源代码为例,教会你步入开源的世界. 1,首先登陆到htt ...
- 3-08. 栈模拟队列(25)(ZJU_PAT 模拟)
主题链接:http://pat.zju.edu.cn/contests/ds/3-08 设已知有两个堆栈S1和S2,请用这两个堆栈模拟出一个队列Q. 所谓用堆栈模拟队列,实际上就是通过调用堆栈的下列操 ...
- Repository、IUnitOfWork 和 IDbContext 的实践
Repository.IUnitOfWork 和 IDbContext 的实践 好久没写 DDD 领域驱动设计相关的文章了,嘎嘎!!! 这几天在开发一个新的项目,虽然不是基于领域驱动设计的,但我想把 ...
- oracle10g获得Date类型字段无分,秒的解决方案!
一般的数据库中,DATE字段只表示日期,不包含日期信息,而Oracle数据库中的DATE数据类型是包含日期.时间的,对于不同的Oracle jdbc驱动版本号.对于该问题的处理都有些差别. 近期使用 ...