【百度地图API】如何制作孪生姐妹地图?
2010-12-21 14:02
381 查看
任务描述: 我想要两张一模一样的地图!我想要双子地图!我想要孪生姐妹地图! 好好好,统统满足大家! 在这里我不需要使用百度地图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>
相关文章推荐
- 【百度地图API】如何制作孪生姐妹地图?
- 【百度地图API】如何制作孪生姐妹地图?
- 【百度地图API】如何利用PhoneGap制作地图APP
- 【百度地图API】如何制作商圈地图?行政地图?
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 【百度地图API】如何利用PhoneGap制作地图APP
- 【百度地图API】如何制作商圈地图?行政地图?
- 【百度地图API】如何制作商圈地图?行政地图?
- 【百度地图API】如何利用PhoneGap制作地图APP
- 如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口
- 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)
- 如何利用【百度地图API】,制作房产酒店地图?(中)——使用右侧列表打开信息窗口
- 【百度地图API】如何制作商圈地图?行政地图?
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)
- 酸奶小妹 奔波于七层楼隔三差五送酸奶的小姑娘正在努力学习百度地图API 如何利用【百度地图API】,制作房产酒店地图?(上)——制作自定义标注和自定义信息窗口
- 如何利用【百度地图API】,制作房产酒店地图?(下)——结合自己的数据库
- 【百度地图API】如何制作商圈地图?行政地图?
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
- 【百度地图API】如何制作商圈地图?行政地图?