当前位置: 首页 > 工具软件 > FusionMaps > 使用案例 >

FusionCharts 技术文档-createing your first map

公良子轩
2023-12-01

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

 类似资料: