国产精品自在线拍国产手机版,日本熟妇全程,日韩有码在线一区

JavaScript地圖工具FusionMaps在同一頁(yè)面中嵌入多張地圖

原創(chuàng)|使用教程|編輯：龔雪|2014-04-18 09:23:51.000|閱讀 529 次

概述：如何使用FusionMaps XT輕松將多個(gè)地圖嵌入同一HTML頁(yè)面（或網(wǎng)頁(yè)）中。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

相關(guān)鏈接：

使用FusionMaps XT可以輕松將多個(gè)地圖嵌入單個(gè)的HTML頁(yè)面（或網(wǎng)頁(yè)），甚至還可以結(jié)合FusionCharts XT, PowerCharts XT圖表以及 FusionWidgets XT計(jì)量表（將在后面的文章中介紹）。

本例中，我們將添加兩個(gè)地圖，分別展示的是世界人口分布圖和澳大利亞人口地圖，如下圖所示：

嵌入多張地圖的步驟其實(shí)跟插入一張地圖是差不多的，只需要做好以下幾步就可以了：

頁(yè)面上的每張地圖都應(yīng)該有唯一的DOM-Id（JavaScript構(gòu)造函數(shù)中指定了的）
每張地圖都對(duì)應(yīng)一個(gè)唯一的 JavaScript變量名。（例如，var WorldMap = new FusionCharts (...); var AusMap = new FusionCharts(...);）
每張地圖都應(yīng)該在單獨(dú)的HTML container(DIV, SPAN etc)中渲染，每個(gè)container都有獨(dú)有的ID。地圖的嵌入代碼必須包含該地圖的containerID相關(guān)聯(lián)的名稱(chēng)
（如render("mapContainerWorld") ; .. render("mapContainerAus");）

下列的示例代碼是兩張地圖嵌入同一HTML頁(yè)面(FirstMap-multiple-maps.html)：

<html>
<head>
<title>My First map using FusionMaps XT - multiple maps</title>
<script type="text/javascript" src="Maps/FusionCharts.js"></script>
</head>
<body>
<span id="mapContainerWorld">World map will load here</span>
<span id="mapContainerAus">Australia map will load here</span>

<script type="text/javascript"><!--

var WorldMap = new FusionCharts("Maps/FCMap_World.swf", "WorldMapId",
"400", "300", "0");
WorldMap.setXMLUrl("Data.xml");
WorldMap.render("mapContainerWorld");

var AusMap = new FusionCharts("Maps/FCMap_Australia.swf", "AusMapId",
"400", "300", "0");
AusMap.setXMLUrl("AustraliaPopulation.xml");
AusMap.render("mapContainerAus");

// -->
</script>

</body>
</html>

通過(guò)以上代碼，我們已將兩張地圖插入到同一個(gè)頁(yè)面中，每張地圖都有其唯一的DOMIds - WorldMapId和AusMapId，每一個(gè)FusionCharts JavaScript對(duì)象都有唯一名稱(chēng)
- mapContainerWorld和mapContainerAus。分別有兩個(gè)HTML containers (SPAN elements)，每個(gè)元素也有其獨(dú)有的ID- mapContainerWorld and mapContainerAus。

本次使用的世界地圖的XML Data和之前的文章"用JavaScript地圖工具FusionMaps繪制你的第一張世界地圖"所用的XML數(shù)據(jù)一樣，同時(shí)還新建了澳大利亞地圖的XML。

最后，當(dāng)我們打開(kāi)HTML頁(yè)面（在上面的code附加一些格式）效果如圖：

要是沒(méi)有Flash播放器怎么辦？
萬(wàn)一某些設(shè)備（如iPad and iPhone）上沒(méi)有Flash播放器，F(xiàn)usionCharts JavaScript庫(kù)會(huì)JavaScript自動(dòng)渲染出同樣的圖表。如果你從本地文件系統(tǒng)運(yùn)行本示例，那么你需要用數(shù)據(jù)串的方法提供數(shù)據(jù)。也就是說(shuō)將數(shù)據(jù)(XML/JSON)以String 或 JSON Object傳到地圖。許多瀏覽器都會(huì)因安全原因限制JavaScript訪問(wèn)本地文件系統(tǒng)。在本例中，你提供的數(shù)據(jù)作為一個(gè)URL JavaScript地圖本地運(yùn)行時(shí)也不能訪問(wèn)。如果在服務(wù)器運(yùn)行文件就不會(huì)有問(wèn)題。所以本地運(yùn)行時(shí)最好使用數(shù)字字符串（Data String method）的方法提供數(shù)據(jù)。

標(biāo)簽：JavaScript HTML5 地圖地圖工具 FusionMaps

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：慧都控件網(wǎng)

上一篇：報(bào)表工具中的圖表制作視頻教程全集下一篇：商業(yè)智能Pentaho教程：基于Metadata創(chuàng)建報(bào)表并發(fā)布