原文:【百度地图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. GitLab 之 Linux十分钟快装(转)

    先把 Shell 命令贴出来,楼主以 CentOS release 6.5 (Final) 64位 为例: //配置系统防火墙,把HTTP和SSH端口开放. sudo yum install curl ...

  2. 【iOS开发-图层】自己定义图层的两种方式

    想要自己定义图层,仅仅须要构建一个类继承CALayer方法 假设让自己定义图层初始化上面就有画好的图形.有两种办法 重写drawInContext方法 自己定义的图层以下的方法.然后必须自己定义的图层 ...

  3. XCL-Charts绘画面积图(AreaChart) 例1

    样本区域地图,发现区域图的时候把做向上注视位置图更具优势的管理.在改变. 区域图网格和轴是不一样的处理与其它图, 它是用来表示其影响范围的覆盖范围,车桥无段伸出. 在这里下处理. watermark/ ...

  4. SplashScreenDemo

    对Java应用最常见的抱怨就是启动时间太长.这是因为Java虚拟机花费一段时间去加载所有必需的类,特别是对Swing应用,它们需要从Swing和AWT类库代码中去抽取大量的内容. 用户并不喜欢应用程序 ...

  5. JQuery EasyUI学习框架

    前言 前端技术,新项目的开发拟使用EasyUI框架(基于EasyUI丰富UI组件库),项目负责人的提示EasyUI分配给我这个任务.发展前,我需要这对于一个新手EasyUI框架学习一些基本的入门.记录 ...

  6. CDH秘籍(两):cloudera Manager存储监控数据

    概述 上一篇文章分析了cloudera manager中监控数据.中心数据的存储方式,如何配置外部表等.这一篇文章进一步分析监控数据的存储,配置,调优等. Service Monitor 和 Host ...

  7. JSP简单的练习-功能标签

    <!-- userfn.jsp --> <%@ page contentType="text/html;charset=gb2312" %> <%@ ...

  8. mount命令使用具体解释(Linux)

    linux是一个优秀的开放源代码的操作系统,能够执行在大到巨型小到掌上型各类计算机系统上,随着 linux系统的日渐成熟和稳定以及它开放源代码特有的优越性,linux在全世界得到了越来越广泛的应用. ...

  9. App山寨疯狂 爱加密Apk加密平台防破解

    App山寨疯狂 爱加密Apk加密平台防破解,Android系统由于其开源性,眼下已占领全球智能机近80%的市场,远超微软的WP系统和苹果的IOS系统.然而也正是由于开源性,Android盗版App在国 ...

  10. 每天收获一点点------Hadoop概述

    一.Hadoop来历 Hadoop的思想来源于Google在做搜索引擎的时候出现一个很大的问题就是这么多网页我如何才能以最快的速度来搜索到,由于这个问题Google发明了倒排索引算法,通过加入了Map ...