HTML5案例实战:访问用户位置的方法和应用技巧_优品建站

HTML5案例实战:访问用户位置的方法和应用技巧

  下面通过多个案例练习使用HTML5访问用户位置的方法和应用技巧。
  注意,由于国家网络限制,内地访问谷歌地图不是很顺畅,建议读者选用高德地图或百度地图开发API,也可以直接使用本书提供的用户key(http://lbs.amap.com/)进行上机练习。
一. 定位手机位置
  本例演示通过Wi-Fi、GPS等方式获取当前地理位置的坐标。当用户打开浏览器时,页面会显示手机网络信号地理定位的当前坐标,同时用高德地图显示当前的地理位置,运行效果如图4.1所示。


图4.1 定位手机位置
  提示,第一次运行该页面时,浏览器会弹出“是否授权使用您的地理位置信息”的提示,该程序需要授权才可正常使用定位功能。
示例核心代码如下。
二. 获取经纬度及其详细地址
  下面的示例演示了如何使用高德地图获取单击位置的经纬度,并根据经纬度获取该位置点的详细地址信息,演示效果如图4.2所示。

图4.2 获取经纬度及其详细地址
示例核心代码如下。
三. 输入提示查询位置

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

图4.3 输入提示查询位置
示例核心代码如下。
四. 从当前位置查询指定位置路线
本例用HTML5 Geolocation API技术获取用户当前位置的经纬度。然后调用高德地图API,根据用户在地图中单击的目标点位置,查询最佳的行走路线,演示效果如图4.4所示。
图4.4 从当前位置查询指定位置路线
示例核心代码如下。
五. 记录行踪路线
本例设计在地图上记录用户运动的轨迹,如图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协议,以得到更好的体验。

  • html5实例:改进“About Me”页面
    本文我们将试着给“About Me”页面进行修改完善。
  • html5+css3+javascript实用案例:分组标签制作联系方式
    本案例将实现明日学院网站的“联系我们”页面。将介绍<div>和<span>分组标签,对页面的内容进行分类分组处理。下面将详细介绍<div>标签和<span>标签。
  • html5的<audio>标签和<video>标签
    在HTML5中,新增了两个标签——<video>标签与<audio>标签。<video>标签专门用来播放网络上的视频或电影,而<audio>标签则专门用来播放网络上的音频数据。
  • html5网站制作实例:改进“About Me”页面
    我们已经了解了微格式和微数据这两个语义流派的基本结构。以此为起点,大家可以自己(到http://microformats.org)去找新的微格式,或者(到http://schema.org)去找微数据词汇表,从头开始编写富有语义的标记。
  • HTML5提供网站制作的表单验证属性
    HTML5为表单验证提供了极大的方便,在验证表单的方式上显得更加灵活。表单验证,首先会基于前面讲解的表单类型的规则进行验证;其次是为表单元素提供了一些用于辅助表单验证的属性。
  • 浏览器对HTML5语义元素的支持情况
    HTML5的这些语义元素已经基本得到了所有现代浏览器的支持。就算你想找到一个不支持它们的Chrome、Firefox、Safari或Opera的版本,都不太可能。最大的绊脚石还是IE9之前的Internet Explorer,包括仍然占很大比例的IE8。
  • HTML5与移动Web开发
    HTML5技术早在2011年就已经被各大浏览器厂商所支持,但是该标准真正制定的完成时间是2014年10月29日。HTML5具有以下特性,以适应移动Web开发。
  • html5网站制作层叠样式表(CSS)简介
    CSS(Cascading Style Sheet,一般翻译为“层叠样式表”或“级联样式表”)是一组HTML元素外观的设置规则,用于控制Web页面的表现形式。
  • HTML5网站制作语法的新变化
    为了兼容各个不统一的页面代码,HTML5的设计在语法方面做了以下变化。
  • 基于HTML5的移动Web开发
    作为新一代的Web技术标准,HTML5标准定义的规范非常广泛,以下标准在目前的移动Web浏览器中已得到很好的支持。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC