Flash地图控件AnyMap使用教程：创建简单地图并嵌入到Web页面中-控件新闻-慧都网

Flash地图控件AnyMap使用教程：创建简单地图并嵌入到Web页面中

原创|使用教程|编辑：郝浩|2013-06-20 13:35:43.000|阅读 455 次

概述：AnyMap是一个灵活的用于创建地图的控件,你可以轻松地使用它创建大量的地图,本次的教程将向大家仔细讲解如何创建一个简单的地图，并添加到Web页面的具体步骤。

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

创建一个Web页面

首先我们需要一个普通的HTML页面,该页面需要包含一个Flash对象,并将它放到web站点下的文件夹中:以下面的结构在IIS wwwroot文件夹中创建AnyChartTest文件夹:

/AnyChartTest
- /swf
  - AnyChart.swf
  - states.amap
- /js
- AnyChart.js
- anychart.xml
- anychart.html

选择地图数据和它的视觉风格

首先需要一些数据来创建地图——一个XML文件（决定图表应该如何显示地图和哪个地图需要显示），Map地图数据文件（包含地图本身）。在这里假设我们想要展示简单的彩色美国地图。

我们吧这张地图放置在states.amap file文件里面，/swf folder. amap文件是储存地图数据的专有格式。

我们需要创建XML设置文件使用这个文件并显示地图,如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Map">
      <chart_settings>
        <title>
          <text>USA Map</text>
        </title>
      </chart_settings>
      <data_plot_settings>
        <map_series source="states.amap">
          <projection type="mercator" />
          <undefined_map_region palette="default">
            <label_settings enabled="True" />
          </undefined_map_region>
        </map_series>
      </data_plot_settings>
    </chart>
  </charts>
</anychart>

复制上述代码，在任意文本编辑器中打开AnyChartTest文件夹中的anychart.xml，并粘贴代码。

XML结构看起来复杂,但是大多数的标签是自我描述性的，用几个XML语言就可以描述一切:

在<chart>节点我们设置设置一个"Map"情节类型——<chart plot_type="Map">

在<chart_settings>节点描述了的图表大致如下所示:

设置地图标题文本：

<title>
  <text>USA Map</text>
</title>

在<data_plot_settings>设置"states.amap"文件用作源地图(AnyChart包中有很多其它地图——务必看完整个列表):

<map_series source="states.amap" />

以不同的颜色设置，并启用所有地图区域的状态标签:

<map_series source="states.amap">
  <projection type="mercator" />
  <undefined_map_region palette="default">
    <label_settings enabled="True" />
  </undefined_map_region>
</map_series>

将自定义数据添加到地图：

使用AnyMap你可以附加任何自定义数据到任何地图,然后使用这些数据来着色、标签、工具提示传说和自定义操作,具体的操作请关注另一篇教程：Flash地图控件AnyMap使用教程：将数据附加到地图。

HTML文件结构

这是在Web网页上看到地图所需要的最后一个步骤：

下面是需要粘贴到anychart.html的代码(在任意文本编辑器中打开它,复制粘贴代码):

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>AnyChart Sample Flash Map </title> 
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script> 
</head> 
<body> 
    <script type="text/javascript" language="javascript"> 
    //<![CDATA[
    var chart = new AnyChart( './swf/AnyChart.swf'); 
    chart.width = 600; 
    chart.height = 450; 
    chart.setXMLFile('./anychart.xml'); 
    chart.write(); 
    //]]> 
    </script> 
</body> 
</html>

只有粗体文本是html代码,你需要将AnyChart Flash Map嵌入到HTML页面。