JavaScript地图工具FusionMaps在同一页面中嵌入多张地图-控件新闻-慧都网

JavaScript地图工具FusionMaps在同一页面中嵌入多张地图

原创|使用教程|编辑：龚雪|2014-04-18 09:23:51.000|阅读 542 次

概述：如何使用FusionMaps XT轻松将多个地图嵌入同一HTML页面（或网页）中。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

相关链接：

使用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@hmdbvip.cn

文章转载自：慧都控件网

上一篇：报表工具中的图表制作视频教程全集下一篇：商业智能Pentaho教程：基于Metadata创建报表并发布