地图应用开发：jQueryMobile界面与地图覆盖物的运用

# 地图应用开发：jQuery Mobile 界面与地图覆盖物的运用 ## 1. jQuery Mobile 构建地图应用界面基础 在开发基于地图的网页应用时，jQuery Mobile 能助力我们快速搭建出优雅且实用的界面。以下是在开发中需要掌握的要点： - **设置 jQuery Mobile 模板**：为地图网页应用搭建基础框架。 - **实现地图控件与 UI 元素的连接**：将地图控件与使用 jQuery Mobile 创建的 UI 元素相关联。 - **添加启动画面**：在应用加载地图切片时显示启动画面，提升用户体验。 - **添加启动图像**：当应用从主屏幕启动时显示启动图像。 完整的 jQuery Mobile UI 代码可在 www.apress.com 获取。 ## 2. 地图覆盖物概述 地图覆盖物是与地理坐标相关联的对象，当缩放或拖动地图时，它们会随之移动。常见的覆盖物类型如下： | 覆盖物类型 | 描述 | 对象类型 | | ---- | ---- | ---- | | 标记（Markers） | 用于指示地图上的单个位置，默认图标可替换为自定义图像 | Marker | | 线（Lines） | 通过一系列有序的坐标集在地图上显示 | Polyline | | 多边形（Polygons） | 用于在地图上显示任意形状的区域，与折线类似，但能定义其包围的区域 | Polygon | | 信息窗口（Info windows） | 在地图上方的弹出气球中显示内容（通常为文本、图像或视频），通常与标记关联 | InfoWindow | | 地面覆盖物（Ground overlays） | 允许开发者将图像约束在一组给定的边界（由地理坐标定义）内放置在地图上 | GroundOverlay | | 自定义覆盖物（Custom overlays） | 实现 OverlayView 接口 | - | | 图层（Layers） | 覆盖物的一个子类别，可包含多个项目，但作为单个对象处理 | - | 目前可用的图层包括： - KmlLayer：在 Maps API V3 切片覆盖物中渲染 KML（和 GeoRSS）元素。 - HeatmapLayer：使用热图可视化渲染地理数据。 - FusionTablesLayer：从 Google 云数据库 Fusion Tables 的表中检索数据并在地图上渲染。 - TrafficLayer：渲染描绘交通状况的图层和代表交通的覆盖物。 - TransitLayer：在地图上显示城市的公共交通网络。 - WeatherLayer 和 CloudLayer：为地图添加天气预报和云图。 - BicyclingLayer：在一个公共图层中渲染自行车道和/或特定于自行车的覆盖物。 - PanoramioLayer：将 Panoramio 的照片作为图层添加。 - DemographicsLayer：将美国人口统计信息作为图层渲染，仅适用于 Google Maps API for Business 客户。 ## 3. 操作地图覆盖物的通用方法 ### 3.1 添加覆盖物到地图 要在地图上显示覆盖物，需使用 `setMap()` 方法。以下是在地图中心添加标记的示例代码： ```javascript var sampleMarker = new google.maps.Marker({ position: coordinates, title: "This is a marker" }); sampleMarker.setMap(map); ``` 也可以在标记的对象字面量中添加 `map` 属性： ```javascript var sampleMarker = new google.maps.Marker({ position: coordinates, title: "This is a marker", map: map }); ``` ### 3.2 从地图中移除和删除覆盖物 移除覆盖物时，使用 `setMap(null)` 方法，此时覆盖物从地图中移除但未被删除。若要删除覆盖物，需先从地图中移除，再将覆盖物本身设置为 `null`。以下是一个使用数组管理多个标记的示例： #### 3.2.1 设置示例的 GUI 使用基于 jQuery Mobile 的应用，修改应用标题和按钮以获得所需的 UI。若标题较长，可通过添加 CSS 来