三级在线观看成人,日韩精品第30页,国产黄色网

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

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

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

相關(guān)鏈接：

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

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

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

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

下列的示例代碼是兩張地圖嵌入同一HTML頁面(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>

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

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

最后，當我們打開HTML頁面（在上面的code附加一些格式）效果如圖：

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

標簽：JavaScript HTML5 地圖地圖工具 FusionMaps

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

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

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