人妖一区,国产极品在线观看,日韩综合在线

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

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

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

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

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

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

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

頁面上的每張地圖都應該有唯一的DOM-Id（JavaScript構造函數中指定了的）
每張地圖都對應一個唯一的 JavaScript變量名。（例如，var WorldMap = new FusionCharts (...); var AusMap = new FusionCharts(...);）
每張地圖都應該在單獨的HTML container(DIV, SPAN etc)中渲染，每個container都有獨有的ID。地圖的嵌入代碼必須包含該地圖的containerID相關聯的名稱
（如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數據一樣，同時還新建了澳大利亞地圖的XML。

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

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

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

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

文章轉載自：慧都控件網

上一篇：報表工具中的圖表制作視頻教程全集下一篇：商業智能Pentaho教程：基于Metadata創建報表并發布