地理定位与混合应用开发全解析

### 地理定位与混合应用开发全解析 #### 1. 地理定位功能实现 地理定位功能在Web应用中有着广泛的应用，下面将详细介绍地理定位功能的实现步骤，主要包括CSS文件、JavaScript文件中的各项功能。 ##### 1.1 CSS文件 CSS文件用于定义页面的布局和样式，以下是相关的CSS代码： ```css html { height:100%; } body { height:100%; margin:0px; padding:0px; } #divHeader { position:absolute; top:0px; height:40px; } #divFooter { position:absolute; bottom:0px; height:40px; } #map_canvas { width:100%; position: absolute; top:40px; bottom:40px; left:0px; right:0px; } #tilesSplashScreen { width:100%; z-index: 100; position:absolute; top:40px; bottom:40px; background-color:#000000; } #tilesSplashScreen table { width:100%; height:100%; } #tilesSplashScreen tr { vertical-align:middle; padding:5px; text-align:center; font-weight: bold; color:#FFF; font-family: Helvetica,Arial,sans-serif; font-size: 16pt } ``` 该CSS代码定义了页面的整体布局，包括头部、内容区域、底部以及地图和加载屏幕的样式。 ##### 1.2 JavaScript文件 JavaScript文件中包含了实现地理定位功能的核心代码，以下是详细介绍： - **全局变量与初始化函数**：首先声明一些全局变量，然后定义`initialize()`函数。在`initialize()`函数中，定义了一个自定义地图样式，该样式通过应用反转亮度和特定色调，为地图赋予了“酷炫”的夜间效果，同时简化了一些元素以提高地图的可读性。以下是自定义地图样式的代码： ```javascript var customStyle = [ { "elementType" : "geometry", "stylers" : [ { "visibility" : "simplified" } ] }, { "stylers" : [ { "invert_lightness" : true }, { "hue" : "#00bbff" } ] }, { "featureType" : "landscape.man_made", "elementType" : "labels", "stylers" : [ { "visibility" : "simplified" } ] }, { "featureType" : "water", "stylers" : [ { "invert_lightness" : true } ] } ]; ``` 在`initialize()`函数中，还创建了地图并设置其选项，将自定义样式分配给自定义地图类型，并将其设置为当前地图类型。同时，创建了一个`fusionTablesLayer`对象并设置在地图上，用于显示所有的兴趣点（POI）。 - **`selectPlace()`函数**：该函数与选择菜单相关联，根据用户的选择启动Fusion Tables查询，以下是其代码： ```javascript function selectPlace() { var optionsList = document.getElementById("select-choice-min"); var requestedPlace = optionsList.options[optionsList.selectedIndex].value; var where = "name CONTAINS IGNORING CASE '" + requestedPlace + "'"; layer.setOptions( { query : { select : 'geometry', from : '1xVSwuTzf_5ufbbc410WCcRKTcWyQfB91JLEbQY8', where : where } } ); map.setZoom(12); map.setCenter(initialCenter); } ``` - **`showAll()`函数**：该函数用于显示地图上的所有POI，并将地图设置为初始缩放级别和中心位置，代码如下： ```javascript function showAll() { layer.setOptions( { query : { select : 'geometry', from : '1xVSwuTzf_ ```