原文:【百度地图API】如何制作孪生姐妹地图?

任务描述:

  我想要两张一模一样的地图!我想要双子地图!我想要孪生姐妹地图

  好好好,统统满足大家!

  在这里我不需要使用百度地图API提供的地图缩略图控件,而是自己动手做一对双胞胎地图

如何实现?

  创建两张地图,map1和map2,他俩的中心点和地图级别(放大倍数)不同。

  当鼠标移动map1的中心点时,map2的中心点会随着一起变化,最终和map1的中心点一致。

  同理,可以实现用鼠标滚轮放大缩小地图。

操作试试:

  移动左边的地图,右边的地图会随着一起运动;

  对左边的地图使用鼠标滚轮(中键),右边的地图也会放大或者缩小。

图示:

运行代码,请点击这里

代码:

代码

); // 初始化地图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】如何制作孪生姐妹地图?的更多相关文章

  1. 【百度地图API】如何制作商圈地图?行政地图?

    原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...

  2. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  3. 百度地图API详解之自定义地图类型

    http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...

  4. android菜鸟学习笔记31----Android使用百度地图API(二)获取地理位置及地图控制器的简单使用

    1.获取当前地理位置: Android中提供了一个LocationManager的类,用于管理地理位置.不能通过构造函数获取该类的实例,而是通过Context的getSystemService(): ...

  5. 【百度地图API】制作多途经点的线路导航——路线坐标规划

    一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...

  6. 通过百度地图API显示当前位置在地图上(图标显示)--第三方开源--百度地图(二)

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...

  7. jvectormap地图开发和制作任意国家地图

    jvectormap官网上提供了世界地图和很多国家的地图,但不是所有国家的地图都有,比如沙特阿拉伯的国家地图就没有,怎么办呢? 在http://www.amcharts.com/svg-maps/上下 ...

  8. 【百度地图API】如何制作自定义样式的公交导航结果面板?

    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...

  9. 乐卡上海网点地图制作心得 | 百度地图API使用心得

    前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...

随机推荐

  1. Microsoft Toolkit 2.5下载 – 一键激活Windows 8.1/2012 R2/Office 2013

    http://www.dayanzai.me/microsoft-toolkit-2-5.html

  2. C# - is

     Checks if an object is compatible with a given type. An is expression evaluates to true if the pr ...

  3. c++内存泄漏处理(积累)

    写c++程序时,常常会出现内存泄漏的问题,这里从网上找了一种非常麻烦的方法:假设想找到每一个cpp文件的内存泄漏,都必须在每一个cpp加上例如以下代码: #include <crtdbg.h&g ...

  4. nodeJs基础

    Node.js 是一个基于Chrome JavaScript 执行时建立的一个平台, 用来方便地搭建高速的 易于扩展的网络应用· Node.js 借助事件驱动, 非堵塞I/O 模型变得轻量和高效, 很 ...

  5. 容易centos配置docker维修

    首先.由于docker实施需要linux某些组件支持本身和内核特性.所以一定要确保centos版本号大于6,和内核版本号大于2.6.32-431.可轻松升级centos6到最新的版本号. sudo y ...

  6. [HA]负载均衡:HAPROXY与KEEPALIVED强强联合

    第一步:更改系统控制配置文件,同意分配虚拟IP(VIP) /etc/sysctl.conf net.ipv4.ip_nonlocal_bind=1 <pre style="word-w ...

  7. 手把手教你如何加入到github的开源世界! (转)

    我曾经一直想加入到开源项目中,但是因为没有人指导流程,网上看了很多,基本都是说了个大概,如果你也是一个初出茅庐的人,那么,我将以自己提交的一次开源代码为例,教会你步入开源的世界. 1,首先登陆到htt ...

  8. 3-08. 栈模拟队列(25)(ZJU_PAT 模拟)

    主题链接:http://pat.zju.edu.cn/contests/ds/3-08 设已知有两个堆栈S1和S2,请用这两个堆栈模拟出一个队列Q. 所谓用堆栈模拟队列,实际上就是通过调用堆栈的下列操 ...

  9. Repository、IUnitOfWork 和 IDbContext 的实践

    Repository.IUnitOfWork 和 IDbContext 的实践 好久没写 DDD 领域驱动设计相关的文章了,嘎嘎!!! 这几天在开发一个新的项目,虽然不是基于领域驱动设计的,但我想把 ...

  10. oracle10g获得Date类型字段无分,秒的解决方案!

    一般的数据库中,DATE字段只表示日期,不包含日期信息,而Oracle数据库中的DATE数据类型是包含日期.时间的,对于不同的Oracle jdbc驱动版本号.对于该问题的处理都有些差别. 近期使用 ...