4.2 案例实战

下面通过多个案例练习使用HTML5访问用户位置的方法和应用技巧。

注意，由于国家网络限制，内地访问谷歌地图不是很顺畅，建议读者选用高德地图或百度地图开发API，也可以直接使用本书提供的用户key（http://lbs.amap.com/）进行上机练习。

4.2.1 定位手机位置

本例演示通过Wi-Fi、GPS等方式获取当前地理位置的坐标。当用户打开浏览器时，页面会显示手机网络信号地理定位的当前坐标，同时用高德地图显示当前的地理位置，运行效果如图4.1所示。

图4.1 定位手机位置

提示，第一次运行该页面时，浏览器会弹出“是否授权使用您的地理位置信息”的提示，该程序需要授权才可正常使用定位功能。

示例核心代码如下。

4.2.2 获取经纬度及其详细地址

下面的示例演示了如何使用高德地图获取单击位置的经纬度，并根据经纬度获取该位置点的详细地址信息，演示效果如图4.2所示。

图4.2 获取经纬度及其详细地址

示例核心代码如下。

4.2.3 输入提示查询位置

本例利用高德地图API设计一个定位交互操作，在地图界面设置一个文本框，允许用户输入关键词，然后自动匹配提示相关地点列表选项。用户选择匹配的关键词之后，页面会自动标记对应位置，效果如图4.3所示。本例使用了高德地图API中的Autocomplete和PlaceSearch类定位搜索。

图4.3 输入提示查询位置

示例核心代码如下。

4.2.4 从当前位置查询指定位置路线

本例用HTML5 Geolocation API技术获取用户当前位置的经纬度。然后调用高德地图API，根据用户在地图中单击的目标点位置，查询最佳的行走路线，演示效果如图4.4所示。

图4.4 从当前位置查询指定位置路线

示例核心代码如下。

4.2.5 记录行踪路线

本例设计在地图上记录用户运动的轨迹，如图4.5所示。启动页面，载入地图。单击“开始记录”按钮，随着用户的移动，在地图上同步呈现运动轨迹；单击“停止记录”按钮，停止记录轨迹，并清除历史记录轨迹。

图4.5 记录行踪路线

【操作步骤】

第1步，本例采用高德地图，练习前需要在高德地图官网上申请AppKey，或者直接使用本例源码，然后引入高德地图的JavaScript，代码如下。

        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=93f6f55b917f04781301bad658886335&plugin=
     AMap.Walking"></script>

第2步，设计页面结构，代码如下。

第3步，调用高德地图API绘制地图，并设置地图的中心点和较低的缩放级别，显示整个城市的地图，代码如下。

通过AMap.Map构造函数构建地图对象，格式如下。

     AMap.Map (container，options)

参数说明如下。

container：地图容器元素的ID或者DOM对象。

options：地图配置项，具体参考高德地图API。

第4步，使用HTML5的地理信息接口获取当前的地理位置。

上面代码定义了getPosition函数，函数调用navigator.geolocation.getCurrentPosition接口，获取当前地理位置，该接口的详细说明请参考上节内容。

本例需要记录用户的运动轨迹，因此需要获取高精度位置，所以将options.enableHighAccuracy设置为true。在页面加载完毕后，调用定义的getPosition方法，获取当前地理位置。

第5步，获取地理信息之后，将当前位置设置为地图中心点，并放大地图。单击“开始记录”按钮，程序开始记录用户移动轨迹，代码如下：

采用navigator.geolocation.watchPosition接口监听位置信息的变化，得到更新的经纬度信息。去掉低精度数据，以避免绘制轨迹时，轨迹线存在较大误差。该接口的参数和getCurrentPosition接口一致。获取定位数据的时候，可以依据实际情况，去掉定位精准度较低的数据。

watchPosition方法在非HTTPS的场景下无法获取定位权限。Chrome可以先通过getCurrentPosition方法获取定位权限。限于篇幅，这里就不细致地介绍绘制轨迹的方法，完整代码请参考本书源码。提示，在实际开发中，建议采用HTTPS协议，以得到更好的体验。