FusionCharts 技术文档-createing your first map

Ccreating your first Map

 

为了帮助您开始与FusionMaps XT,我们将告诉你如何建立一个世界地图,显示人口分布在各大洲。一旦完成,该地图将看起来像下(动画和交互性,这是不是反映了下面的图片):

如果你是一个非技术用户要生成的地图,而无需使用任何程序或脚本,你可以切换到快速地图配置>用视觉地图生成器页面,在这里我们解释如何直观地配置和生成数据驱动的地图没有进入任何编程。

 

Code examples discussed in this section are present in Download Package > Code > MyFirstMap folder.

 

按照下面的步骤以开始浏览网页:

 

您的硬盘驱动器上创建一个文件夹LearningFusionMapsXT。我们将使用此文件夹的根文件夹建立所有FusionMaps XT例子。

名为MyFirstMap上述文件夹内创建一个文件夹。里面文件夹的MyFirstMap,创建一个文件夹命名地图。

,复制FCMap_World.swf和FusionCharts.HC.world.js的下载包> Maps文件夹到MyFirstMap> Maps文件夹。

的复制FusionCharts.js,FusionCharts.HC.js,FusionCharts.HC.Maps.js jquery.min.js文件下载包> Maps文件夹到MyFirstMap> Maps文件夹。

创建一个XML文件»在文件夹MyFirstMap名称data.xml中。

复制下面给出的代码(左)到data.xml文件。是lized的XML的形式,在表中显示的数据(右)的人口。

 

<map borderColor='005879' fillColor='D7F4FF' numberSuffix='M' includeValueInLabels='1' labelSepChar=':' baseFontSize='9'>
     <data>
        <entity id='NA' value='515' />
        <entity id='SA' value='373'/>
        <entity id='AS' value='3875' />
        <entity id='EU' value='727' />
        <entity id='AF' value='885' />
        <entity id='AU' value='32' />
     </data>
</map>

Continents

Population (in Millions)

North America

515

South America

373

Europe

727

Asia

3875

Africa

885

Australia

32

 

 

创建一个HTML文件(文件夹和MyFirstMap复制粘贴下面给出的代码,并将其保存为FirstMap.html“使用文本编辑器如记事本,TextMate的等,或您使用的Web开发软件):

 

 

<html>
  <head>
    <title>My First map using FusionCharts JavaScript Class</title>
    <script type="text/javascript" src="Maps/FusionCharts.js"></script>
  </head>
  <body>
    <div id="mapContainer">FusionMaps XT will load here!</div>
    <script type="text/javascript"><!--
         
    var myMap = new FusionCharts ("Maps/FCMap_World.swf", "MyMapId", "750", "400", "0");
      myMap.setXMLUrl ("Data.xml");
      myMap.renders("mapContainer");
    // -->
    </script>
  </body>
</html>

 

JavaScript的渲染地图:同样的代码可以使地图如JavaScript。你只需要删除。SWF从现有代码的swf文件的文件名和路径。修改后的代码将看起来像VAR myMap中FusionCharts的(“世界”,“MyMapId”,“750”,“400”,“0”);。此代码将呈现一个JavaScript的世界地图。点击这里查看完整的代码和一个活生生的例子。

转载于:https://www.cnblogs.com/leecheeme/archive/2013/04/27/3046318.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值