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

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

任务描述:

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

  好好好,统统满足大家!

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

如何实现?

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

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

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

操作试试:

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

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

图示:

运行代码,请点击这里

代码:

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两个地图联动</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.1&services=true">
</script>
</head>
<body>
<p>
任务描述:当map1运动完以后,map2会跟着map1一起,改变中心点,改变放大级别。
</p>
<div style="float:left;">
<p>MAP1</p>
<div style="width:520px;height:340px;border:1px solid gray" id="container1"></div>
</div>
<div style="float:left;">
<p>MAP2</p>
<div style="width:520px;height:340px;border:1px solid gray" id="container2"></div>
</div>
</body>
<script type="text/javascript">
var map1 = new BMap.Map("container1");
var map2 = new BMap.Map("container2");

var point1 = new BMap.Point(116.411053,39.950507); // 创建中心点
var point2 = new BMap.Point(116.411053,39.950507); // 创建中心点

map1.centerAndZoom(point1,12); // 初始化地图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>

时间: 2024-08-09 08:30:57

【百度地图API】如何制作孪生姐妹地图?的相关文章

百度地图API使用系列3-基本地图1

百度基本地图使用1 关于百度地图申请开发者key 可以参考前面的博客 百度地图API使用系列1-准备工作 关于搭建工程的可以参考前面的博客 百度地图API使用系列2-显示地图 这一篇博客介绍基本地图使用里面的地图类型.显示实时交通图.在地图显示一个Marker. 这里要注意的是关于地图的操作不是有显示地图的控件直接去完成,百度为他添加了一个属性BaiduMap 可以把这个属性理解为是 地图的管理器 我们可以通过对应 的 get 方法 获取这个属性 baiduMap = baiduMapView.

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

http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图类型(map type):普通图和三维图,它们分别通过常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP来表示,在1.2版本中这两个常量实际上是MapType对象的实例.当然开发者也可以自己实例化一个MapType从而实现一个自定义的地图. 切图工具的使用 我们先从切图工具

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

1.获取当前地理位置: Android中提供了一个LocationManager的类,用于管理地理位置.不能通过构造函数获取该类的实例,而是通过Context的getSystemService(): LocationManager lm = (LocationManager) getSystemService(Context.LOCATION_SERVICE); 该类中有几个比较常用的方法: getLastKnownLocation(String provider)用于根据传入的provider

百度地图API使用系列2-显示地图

开始百度地图的应用 首先应该先去下载百度提供给我们的SDK 包括开发包 示例代码 API 登录下面地址 http://developer.baidu.com/map/index.php?title=%E9%A6%96%E9%A1%B5 这些根据自己的开发需要自己决定下载 -> 情况容许全部下载也不大 1. 导入工程需要的类库文件 解压  开发包 进入 libs 目录下面 这个 jar 需要 还有底层库 进入 armeabi 目录下面 如果使用到定位功能 还需要一个 jar包 2. 配置开发者ke

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

1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfunction,mapsdk_lbscloudsearch,mapsdk_calculationtool,mapsdk_radar 2.把demo里面的BaiduMapsApiDemo解压,把BaiduMapsApiDemo文件夹里面的libs里面的所有文件都复制到自己的项目的libs里面 3.配置Andro

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

昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以标记做爱地点与详情的地图.这不就是中国版的I just made love麽? 滑到屏幕底下,看了看阅读量,哇塞,居然有4万3!!!说明实在是有很多人关注做爱地图啊.本着研究地图的心情(绝对不是为了什么价值300的智能情趣用品!),我也就点击了[阅读原文]…… 好吧,为了证明我真的不是为了奖品,我会一边写活动步骤,一边揭秘其中的LBS技术.  

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

前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡.在搜寻过程中,萌生了制作一张基于那些地址的专门戳点地图的想法.期间也看到蚂蚁家制作的北京乐卡地图使用的是百度地图API,但是该网页仅能运行于PC端,手机打开巨卡.刚好我的github博客站最近配置完成了,准备自己也写一个. 材料单 百度开放平台账号一个 百度开放平台浏览器端启用了Javascrip

制作百度地图离线JavaScript API加载本地瓦片地图

1.首先获取百度 JavaScript API 首先用浏览器打开 http://api.map.baidu.com/api?v=1.3 如下图所示 其中 http://api.map.baidu.com/getscript?v=1.3&key=&services=&t=20121108061854 这个链接就是我们要找的API文件, 同样在浏览器中打开它,并另存为诸如“apiv1.3.min.js” 还有百度地图必须的一些控件,光标,logo之类的图片也下载下来 2.修改“apiv

百度地图API和高德地图API资料集锦

[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 [高德地图API]从零开始学高德JS API(二)地图控件与插件--测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 [高德地图API]从零开始学高德JS API