<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;} #r-result{height:100%;width:20%;float:left;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> <title>18.1 孪生姐妹地图</title> </head> <body> <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> </html> <script type="text/javascript"> var map1 = new BMap.Map("container1"); var map2 = new BMap.Map("container2"); var point1 = new BMap.Point(116.404, 39.915); var point2 = new BMap.Point(116.404, 39.915); map1.centerAndZoom(point1, 12); map2.centerAndZoom(point2, 12); map1.addEventListener("moveend", function () { map2.panTo(map1.getCenter()); }); map1.addEventListener("zoomend", function () { map2.zoomTo(map1.getZoom()); }) map1.enableScrollWheelZoom(); </script>
任务描述：
我想要两张一模一样的地图！我想要双子地图！我想要孪生姐妹地图！
好好好，统统满足大家！
在这里我不需要使用百度地图API提供的地图缩略图控件，而是自己动手做一对双胞胎地图！
如何实现？
创建两张地图，map1和map2，他俩的中心点和地图级别（放大倍数）不同。
当鼠标移动map1的中心点时，map2的中心点会随着一起变化，最终和map1的中心点一致。
同理，可以实现用鼠标滚轮放大缩小地图。
操作试试：
移动左边的地图，右边的地图会随着一起运动；
对左边的地图使用鼠标滚轮（中键），右边的地图也会放大或者缩小。
75
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
