FusionTable-Map-Template 使用教程

1. 项目目录结构及介绍

FusionTable-Map-Template 项目是一个开源的地图模板，它允许用户创建带有搜索功能的地图。以下是项目的目录结构：

FusionTable-Map-Template/
├── css/
│   ├── custom.css
│   └── style.css
├── fonts/
│   ├── font1.woff
│   └── font2.woff
├── images/
│   ├── blue-pushpin.png
│   └── other-images.png
├── js/
│   ├── maps_lib.js
│   └── other_scripts.js
├── .gitignore
├── LICENSE
├── README.md
├── about.html
├── iframe_test.html
├── index.html
├── index_iframe.html
└── other_files.html

• css/：包含项目的样式文件，custom.css 用于自定义样式，style.css 包含默认样式。
• fonts/：包含字体文件，用于页面的字体渲染。
• images/：包含项目所需的图片文件，例如地图标记等。
• js/：包含项目的 JavaScript 文件，maps_lib.js 是主要的地图库文件，用于处理地图逻辑。
• .gitignore：定义了 Git 忽略的文件和目录。
• LICENSE：项目的开源协议文件。
• README.md：项目的说明文件，包含了项目的使用说明。
• about.html、iframe_test.html、index.html、index_iframe.html、other_files.html：项目的 HTML 页面文件。

2. 项目的启动文件介绍

项目的启动文件是 index.html。这个文件是用户与地图交互的主要界面。以下是 index.html 的主要组成部分：

• HTML 头部包含了页面标题和元数据。
• 引入了 CSS 样式文件。
• 引入了 JavaScript 文件，包括 Google Maps API 和项目自有的 maps_lib.js。
• 包含了一个地图容器，用于显示地图。
• 包含了搜索表单和其他用户交互元素。
• 最后是页面的 JavaScript 初始化代码，这里会创建 MapsLib 实例并设置地图的配置选项。

3. 项目的配置文件介绍

项目的配置主要通过 maps_lib.js 文件进行。在这个文件中，可以设置以下配置选项：

• fusionTableId：Google Fusion 表的 ID，用于关联地图数据。
• googleApiKey：Google API 密钥，用于访问 Google Maps API。
• locationColumn：Fusion 表中地理位置列的名称。
• map_center：地图默认中心的纬度和经度坐标。
• locationScope：搜索结果的范围限制，例如城市名称。
• defaultZoom：地图默认的缩放级别。
• addrMarkerImage：地址搜索结果的地图标记图片。

这些配置项可以在创建 MapsLib 实例时传递，如：

var myMap = new MapsLib({
  fusionTableId: "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",
  googleApiKey: "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY",
  locationColumn: "geometry",
  map_center: [41.8781136, -87.66677856445312],
  locationScope: "chicago",
  // 其他配置项...
});

确保在使用前替换为正确的 Fusion 表 ID 和 Google API 密钥。