彩票走势图

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

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

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

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

相关链接:

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

FusionMaps,地图工具,JavaScript

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

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化的的结果。

FusionMaps,地图工具,JavaScript

各州人口数据:

FusionMaps,地图工具,JavaScript

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

FusionMaps,地图工具,JavaScript

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

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

 


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

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

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP