【百度地图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使用心得
前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...
随机推荐
- zoj 2156 - Charlie's Change
称号:拼布钱,表面值至1,5.10.25.寻求组成n表面值硬币的最大数目. 分析:dp,01背包.需要二元分割,除此以外TLE.使用每个硬币的数组记录数.轻松升级. 写了一个 多重背包的 O(NV)反 ...
- Java的λ表达(lambda)
λ表达的基本目的 回调Java8的λ表达式 说明了Java8的λ表达式的基本用途:完毕了回调的原意--代码的參数化. 回调:能够简单地说,假设你的方法须要override底层或JDK的某个类的方法,并 ...
- 大约linux的几个问题,你能回答几个?--回复14-20称号
14.select和poll差异?Poll和epoll的差别? (1)select和poll的差别:(參考:http://blog.csdn.net/mituan2008/article/detail ...
- 给AspNetPager分页控件添加bootstrap样式
AspNetPager分页控件算是比较好用的一个分页控件了.想要结合bootstrap使用,官方代码入口 .pagination a[disabled]{ color: #777;cursor: no ...
- Cocos2d:使用 CCCamera 做滚动效果 (Four Ways of Scrolling with Cocos2D)
原版的:http://www.koboldtouch.com/display/IDCAR/Four+Ways+of+Scrolling+with+Cocos2D There are two class ...
- c# 硬件开源神器netduino的开发中慎用Cpu.Pin
最近为了测试netduino开发板的各个端口是否正常使用,让同事写了一些测试程序,结果出了问题,他的测试程序导致开发板无法发布程序进去,按他的结论是开发板有问题,针对这个情况,我们经过仔细分析代码,认 ...
- 【代码优化】当许多构造函数的参数,请考虑使用builder模式
静态工厂和构造具有共同的局限性:我们不能扩展到大量的非常好的可选参数. 1.对于多个可选參数的构造器.我们都习惯採用重叠构造器模式.比方一个參数的构造器调用2个參数的构造器. 2个參数的构造器 ...
- WinDbg调试.NET
WinDbg调试.NET程序入门 俗话说:万事开头难! 自从来到新公司遇到性能问题后,需要想办法解决这个问题,但是一直没有合适的性能分析工具,然后找到StevenChennet 大神帮忙,他用WinD ...
- javascript小白学习指南0---1
引言: 做为一名程序猿.都是真心的想把自己的东西分享出来,供大家一起学习探讨.一起提高技能.一起涨工资,呵 这一系列的文章都是关于Javascript 基础的 当然文章其中穿插了些我自己的理解.希 ...
- DataNode连接错误Retrying connect to server
在Hadoop分布式模式部署完毕后,通过start-dfs.sh启动NameNode.DataNode.SecondaryNameNode,在master节点通过jps命令查看,看到NameNod ...