用JavaScript地图工具FusionMaps绘制你的第一张世界地图-控件新闻-慧都网

用JavaScript地图工具FusionMaps绘制你的第一张世界地图

原创|使用教程|编辑：龚雪|2014-04-15 10:01:29.000|阅读 4226 次

概述：本篇详细说明了如何用FusionMaps XT制作一张世界各州人口分布图，简单易懂，为FusionMaps 的初学者提供学习资源。

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

相关链接：

学习用FusionMaps XT制作地图我们首先从制作一张世界各大洲人口分布图开始。地图制作完成后就是下图的样子（当然，其交互性和动画效果不能通过图片展示):

跟着下面的指示一步步操作吧：

1、首先在硬盘上新建一个名为LearningFusionMapsXT的文件夹。我们将把这个文件夹用作根文件夹存储所有 FusionMaps XT例子。

2、再在根文件夹内创建一个名为MyFirstMap的文件夹，然后在这个文件夹内再新建一个名为Maps的文件夹。

3、将FCMap_World.swf 和 FusionCharts.HC.world.js文件从Download Pack > Maps复制到MyFirstMap > Maps。

4、将Copy FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Maps.js 和 jquery.min.js 文件从Download Pack >Maps复制到MyFirstMap > Maps folder。

5、在MyFirstMap文件夹内创建一个XML文件，名为Data.xml.。

6、将下列代码复制到Data.xml文件，这是代码后面人口数据XML化的的结果。

各州人口数据：

7，在MyFirstMap文件夹新建一个HTML文件（使用文本编辑器如记事本，TextMate等，或是你所使用的web开发软件），将下列代码复制粘贴到HTML文件中并保存为FirstMap.html。

完成后，将FirstMap.html在浏览器中打开，你会看到一张动态的世界地图。

同样的代码还可以用JavaScript渲染出来。只需要把文件名中的.swf后缀和现成代码中的 swf file的路径去掉。修改后的代码看起来就是var myMap = new FusionCharts ("World", "MyMapId", "750", "400", "0")，一个JavaScript世界地图就生成了。

标签：JavaScript HTML5 图表数据可视化地图工具 FusionMaps

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@hmdbvip.cn

文章转载自：慧都控件网

上一篇：BCGControlBar常见GUI示例汇总（附下载）下一篇：JavaScript地图工具FusionMaps 标准XML文档及参数