百度地图JavaScript API如何在同一页面显示多个地图

经常有人问，百度地图JavaScript API能在同一页面显示多个地图吗？当然可以啊，为什么不可以呢？地图之于页面无非就是个div，我们可以在页面显示多个div，自然也可以显示多个地图。

以下是在页面加入两个地图的效果：

页面核心代码如下:

[html]
 
 
   

 
  
 
   

 
 
 
 

   

  

   

以上代码可以实现在同一页面显示两幅并排的地图，如果想要实现拖拽、缩放左边的地图，右边的地图也随着移动、缩放，则只需要给左边的地图注册zoomend和moveend事件即可，代码如下：

 

[html]
map1.addEventListener("zoomend", function () { 
map2.zoomTo(map1.getZoom()); 
map2.panTo(map1.getCenter()); 
}); 
 
map1.addEventListener("moveend", function () { 
map2.zoomTo(map1.getZoom()); 
map2.panTo(map1.getCenter()); 
}); 

 map1.addEventListener("zoomend", function () {
 map2.zoomTo(map1.getZoom());
 map2.panTo(map1.getCenter());
 });

 map1.addEventListener("moveend", function () {
 map2.zoomTo(map1.getZoom());
 map2.panTo(map1.getCenter());
 });
完整代码如下：

[html]