快捷導(dǎo)航

如何在一個(gè)頁(yè)面顯示多個(gè)百度地圖

更新時(shí)間：2013年04月07日 11:26:36 作者：

經(jīng)常有人問(wèn)，百度地圖JavaScript API能在同一頁(yè)面顯示多個(gè)地圖嗎？當(dāng)然可以啊，為什么不可以呢？地圖之于頁(yè)面無(wú)非就是個(gè)div，我們可以在頁(yè)面顯示多個(gè)div，自然也可以顯示多個(gè)地圖。

以下是在頁(yè)面加入兩個(gè)地圖的效果：

頁(yè)面核心代碼如下:

復(fù)制代碼代碼如下:

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}); //設(shè)置衛(wèi)星圖為底圖
map2.centerAndZoom(new BMap.Point(116.401394,39.915156),12);
map2.enableScrollWheelZoom();
</script>

以上代碼可以實(shí)現(xiàn)在同一頁(yè)面顯示兩幅并排的地圖，如果想要實(shí)現(xiàn)拖拽、縮放左邊的地圖，右邊的地圖也隨著移動(dòng)、縮放，則只需要給左邊的地圖注冊(cè)zoomend和moveend事件即可，代碼如下：

復(fù)制代碼代碼如下:

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

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

完整代碼如下：

復(fù)制代碼代碼如下:

<!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>
<div id="mapDiv1" ></div>
<br />
<div id="mapDiv2" ></div>
</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}); //設(shè)置衛(wèi)星圖為底圖
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>

您可能感興趣的文章: