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

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

页面核心代码如下：复制代码代码如下：样式类型=' text/CSS ' # MapDiv 1 { height :400 px；宽度宽度：600px} # mapDiv2 {高度：400px宽度宽度：600 pxleft :620 pxtop :-420 px；}/stylebodydiv id=' mapdiv 1 '/div br/div id=' mapdiv 2 '/div/body/html脚本类型=' text/JavaScript '//地图初始化var map1=新的BMap .地图(“MapDiv 1”)；map1.centerAndZoom(新的BMap .点(116.401394,39.915156),12);地图1。enablescrolheelzoom()；var map2=新的BMap .地图(' mapDiv2 '，{ maptype : BMAP _ HYBRID _ MAP })；//设置卫星图为底图map2.centerAndZoom(新的BMap .点(116.401394,39.915156),12);地图2。enablescrolheelzoom()；/script以上代码可以实现在同一页面显示两幅并排的地图，如果想要实现拖拽、缩放左边的地图，右边的地图也随着移动、缩放，则只需要给左边的地图注册zoomend和moveend事件即可，代码如下：复制代码代码如下：地图1。addeventlistener(' zoom mend '，function(){ map 2。缩放至(地图1。getzoom())；地图2。panto(地图1。GetCenter())；});map1.addEventListener('moveend '，function(){ map 2。zoomto(地图1。getzoom())；地图2。panto(地图1。GetCenter())；});完整代码如下：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/脚本类型=' text/JavaScript ' src=' http :http://API。地图。百度。com/API？v=1.4'/scripttitle地图接口/title/head style type=' text/CSS ' # MapDiv 1 { height :400 px；宽度宽度：600px} # mapDiv2 {高度：400px宽度宽度：600 pxleft :620 pxtop :-420 px；}/stylebodydiv id=' mapdiv 1 '/div br/div id=' mapdiv 2 '/div/body/html脚本类型=' text/JavaScript '//地图初始化var map1=新的BMap .地图(“MapDiv 1”)；map1.centerAndZoom(新的BMap .点(116.401394,39.915156),12);地图1。enablescrolheelzoom()；var map2=新的BMap .地图(' mapDiv2 '，{ maptype : BMAP _ HYBRID _ MAP })；//设置卫星图为底图map2.centerAndZoom(新的BMap .点(116.401394,39.915156),12);地图2。enablescrolheelzoom()；地图1。addeventlistener(' zoom mand '，function(){ map 2。zoomto(地图1。getzoom())；地图2。panto(地图1。GetCenter())；});map1.addEventListener('moveend '，function(){ map 2。zoomto(地图1。getzoom())；地图2。panto(地图1。GetCenter())；});/script