原文:【百度地图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. Mac下一个svn提交.a文件

    Mac在版本控制工具Versions非常方便.一些库有.a文件必须提交svn,commit它发现被忽略的,不能提交没有这个文件.然后通过设置.VEIW->SHOW IGNORED ITEMS选, ...

  2. 设计模式-----观察者模式(Obsever)

    它定义了对象之间一对多的依赖关系.因此,.当一个对象的状态变化,对吸毒成瘾者,他将收到通知和更新自己主动. 观察者模式的组成: 抽象主题角色:把全部对观察者对象的引用保存在一个集合中.抽象主题提供一个 ...

  3. RH253读书笔记(1)-Lab 1 System Monitoring

    Lab 1 System Monitoring Goal: To build skills to better assess system resources, performance and sec ...

  4. linux命令之删除

      linux删除文件夹非常easy,非常多人还是习惯用rmdir,只是一旦文件夹非空,就陷入深深的苦恼之中,如今使用rm -rf命令就可以. 直接rm就能够了,只是要加两个參数-rf 即:rm -r ...

  5. Windows Phone 8 MD5

    using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Wi ...

  6. Cloudera impala简单介绍及安装具体解释

    一.Impala简单介绍 Cloudera Impala对你存储在Apache Hadoop在HDFS,HBase的数据提供直接查询互动的SQL.除了像Hive使用同样的统一存储平台,Impala也使 ...

  7. mac系统连接android电话

    mac该系统不能连接android手机问题解决: 1.将电话 2.到场android手机vendor ID: 终端业务CMD:  system_profiler SPUSBDataType 在列出的u ...

  8. java类和对象之间的差

    java类和对象之间的差别是一个普遍的问题,刚开始学习java当它来到与类和对象接触.今天就来总结一下它们之间的差异. 先说说class和object差异.事实上,词:object是全部class的父 ...

  9. rm-rf 恢复过程中滥用

    多DBA一定rm -rf讨厌它,也许有一天自己将数据库,以消除一个中午,然后.那么就没有一个--这种情况下,--这个不幸真的发生,你真的无药可救?不必要,有解决方法.也许你遇到不幸时,有一天.你可以用 ...

  10. 变化Android系统属性SystemProperties.set(&quot;sys.powerctl&quot;, &quot;shutdown&quot;)关机分析

    基本介绍: 从以前的博客中提到,我们,最后,通过关机过程变化Android关机属性(SystemProperties.java由JNI呼叫接入系统属性),当然,我们也能adb命令变化Android系统 ...