百度地圖JavaScript API如何在同一頁面顯示多個地圖?

經常有人問,百度地圖JavaScript API能在同一頁面顯示多個地圖嗎?當然可以啊,為什麼不可以呢?地圖之於頁面無非就是個p,我們可以在頁面顯示多個p,自然也可以顯示多個地圖。

以下是在頁面加入兩個地圖的效果:

 

\

頁面核心代碼如下:

[html]
<style type="text/css"> 
    #mapDiv1 { height:400px; width:600px; } 
    #mapDiv2 { height:400px; width:600px; left:620px; top:-420px;} 
</style> 
<body> 
    <p id="mapDiv1" ></p> 
   <br /> 
    <p id="mapDiv2" ></p> 
</body> 
</html> 
<script type="text/javascript"> 
    //地圖初始化 
 
    var map1 = new BMap.Map("mapDiv1"); 
    map1.centerAndZoom(new BMap.Point(116.401394,39.915156),12); 
    map1.enableScrollWheelZoom(); 
 
    var map2 = new BMap.Map("mapDiv2",{mapType: BMAP_HYBRID_MAP});   //設置衛星圖為底圖 
    map2.centerAndZoom(new BMap.Point(116.401394,39.915156),12); 
    map2.enableScrollWheelZoom(); 
</script> 

<style type="text/css">
 #mapDiv1 { height:400px; width:600px; }
 #mapDiv2 { height:400px; width:600px; left:620px; top:-420px;}
</style>
<body>
    <p id="mapDiv1" ></p>
   <br />
    <p id="mapDiv2" ></p>
</body>
</html>
<script type="text/javascript">
    //地圖初始化

    var map1 = new BMap.Map("mapDiv1");
    map1.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
    map1.enableScrollWheelZoom();

    var map2 = new BMap.Map("mapDiv2",{mapType: BMAP_HYBRID_MAP});   //設置衛星圖為底圖
    map2.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
    map2.enableScrollWheelZoom();
</script>
以上代碼可以實現在同一頁面顯示兩幅並排的地圖,如果想要實現拖拽、縮放左邊的地圖,右邊的地圖也隨著移動、縮放,則隻需要給左邊的地圖註冊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]
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> 
    <title>地圖接口</title> 
</head> 
<style type="text/css"> 
    #mapDiv1 { height:400px; width:600px; } 
    #mapDiv2 { height:400px; width:600px; left:620px; top:-420px;} 
</style> 
<body> 
    <p id="mapDiv1" ></p> 
   <br /> 
    <p id="mapDiv2" ></p> 
</body> 
</html> 
<script type="text/javascript"> 
    //地圖初始化  
    var map1 = new BMap.Map("mapDiv1"); 
    map1.centerAndZoom(new BMap.Point(116.401394,39.915156),12); 
    map1.enableScrollWheelZoom(); 
 
 
    var map2 = new BMap.Map("mapDiv2",{mapType: BMAP_HYBRID_MAP});   //設置衛星圖為底圖 
    map2.centerAndZoom(new BMap.Point(116.401394,39.915156),12); 
    map2.enableScrollWheelZoom(); 
 
   
    map1.addEventListener("zoomend", function () { 
    map2.zoomTo(map1.getZoom()); 
    map2.panTo(map1.getCenter()); 
    }); 
 
    map1.addEventListener("moveend", function () { 
    map2.zoomTo(map1.getZoom()); 
    map2.panTo(map1.getCenter()); 
    }); 
 
</script> 

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <title>地圖接口</title>
</head>
<style type="text/css">
 #mapDiv1 { height:400px; width:600px; }
 #mapDiv2 { height:400px; width:600px; left:620px; top:-420px;}
</style>
<body>
    <p id="mapDiv1" ></p>
   <br />
    <p id="mapDiv2" ></p>
</body>
</html>
<script type="text/javascript">
    //地圖初始化
    var map1 = new BMap.Map("mapDiv1");
    map1.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
    map1.enableScrollWheelZoom();

    var map2 = new BMap.Map("mapDiv2",{mapType: BMAP_HYBRID_MAP});   //設置衛星圖為底圖
    map2.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
    map2.enableScrollWheelZoom();

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

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

</script>

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *