文档章节

HTML5 Geolocation API和Google Maps API结合实现路线导航

iNiL0119
 iNiL0119
发布于 2016/09/14 21:35
字数 1213
阅读 178
收藏 3

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置信息。

定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。

function getLocation(){ 
  if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(showPosition,showError)
  }else{ 
    alert("浏览器不支持地理定位。")
  } 
}

上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。
我们先来看函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:

function showError(error){ 
  switch(error.code) { 
    case error.PERMISSION_DENIED: 
      alert("定位失败,用户拒绝请求地理定位")
      break
    case error.POSITION_UNAVAILABLE: 
      alert("定位失败,位置信息是不可用") 
      break
    case error.TIMEOUT: 
      alert("定位失败,请求获取用户位置超时")
      break
    case error.UNKNOWN_ERROR: 
      alert("定位失败,定位系统失效")
      break
  } 
} 

我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。

function showPosition(position){ 
  var lat = position.coords.latitude //纬度 
  var lag = position.coords.longitude //经度 
  alert('纬度:'+lat+',经度:'+lag)
} 

利用百度地图和谷歌地图接口获取用户地址
上面我们了解了HTML5的Geolocation可以获取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5获取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div,分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互,我们将经纬度信息通过Ajax方式发送给百度地图接口,接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据,我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库,需要先加载jQuery库文件。

function showPosition(position){ 
  var latlon = position.coords.latitude+','+position.coords.longitude
    
  //baidu 
  var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"; 
  $.ajax({ 
    type: "GET", 
    dataType: "jsonp", 
    url: url, 
    beforeSend: function(){ 
      $("#baidu_geo").html('正在定位...')
    }, 
    success: function (json) { 
      if(json.status==0){ 
        $("#baidu_geo").html(json.result.formatted_address)
      } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $("#baidu_geo").html(latlon+"地址位置获取失败")
    } 
  })
})

再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口,接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据,这些JSON数据比百度地图接口返回的要更详细,我们可以根据需求将需要的信息展示给div#google_geo。

function showPosition(position){ 
  var latlon = position.coords.latitude+','+position.coords.longitude
  
  //google 
  var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'
  $.ajax({ 
    type: "GET", 
    url: url, 
    beforeSend: function(){ 
      $("#google_geo").html('正在定位...')
    }, 
    success: function (json) { 
      if(json.status=='OK'){ 
        var results = json.results
        $.each(results,function(index,array){ 
          if(index==0){ 
          $("#google_geo").html(array['formatted_address'])
          } 
        })
      } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $("#google_geo").html(latlon+"地址位置获取失败")
    } 
  })
} 

以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中,我们可以根据实际情况进行调用。当然这只是一个简单的应用,我们可以根据这个简单的示例开发出很多复杂的应用,建议用手机浏览器访问DEMO演示。

© 著作权归作者所有

iNiL0119
粉丝 7
博文 90
码字总数 88887
作品 0
杭州
前端工程师
私信 提问
HTML5编程之旅 第1站 Geolocation

HTML5 Geolocation 初探 让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API(地理定位API),可以请求用户共享他们的...

倪伟伟
2014/02/24
257
0
HTML5 Geolocation 定位服务 实例

本例采用html5 Geolocation 定位服务 和 google maps api 3 完成,运行时请确保你的浏览器支持 html5. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, u......

张亚锋
2012/05/08
263
0
Vue+Node+高德地图+Echart做一款出行可视化全栈webapp

咔咔出行(出行可视化) 项目简介 解决出行问题,用于出行行程记录,路线规划,数据可视化分析的移动端webapp 点击这里查看该项目 项目截图 私人出行 公共交通 历史列表 我的信息 技术栈 前端...

王文健
06/08
0
0
好程序员技术分享html5和JavaScript的区别

好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网...

好程序员IT
04/26
17
0
Mozilla 发布 WebAPI 规范

Mozilla 刚刚发布了 WebAPI 项目. "WebAPI 由 Mozilla 努力为解决不同的浏览器中的差异而推出的一个统一一致的API,该API跟操作系统无关,目前正在进行规范草案以及参考实现的实施阶段,该项...

红薯
2011/08/23
2.4K
3

没有更多内容

加载失败,请刷新页面

加载更多

JS--function

一、声明提前(hoist) 在js程序开始执行前,引擎会查找所有var声明的变量和function声明的函数,集中到当前作用域顶部集中创建,赋值留在原地 二、三种创建函数的方式 1、声明方式创建函数-...

wytao1995
今天
4
0
微服务之间调用控制器注解类型的差异

今天在一个业务服务通过Feign调用文件服务上传文件时遇到了几个问题: 1. 提示http请求头过大的问题; 此时需要修改bootstrap.yml,加入 server: max-http-header-size: 10000000 用以放大...

不再熬夜
今天
7
0
用 4G 工作是什么体验

七月开始,因为工作原因,在公司附近租了个住处,方便工作。离公司近了,感觉就是不一样,之前每天 5:30 就要起床赶地铁,现在可以睡到自然醒,一看才 7 点,悠闲的起床洗漱,踱步到公司,都...

zzxworld
今天
6
0
sonar报错volatile

问题发生 原先代码如下: //认证授权码private static volatile String AUTHORIZATION_CODE = "init"; git push 之后,sonar认为这是个bug检测报告截图如下: 分析排查 解释说明: Markin...

开源小菜鸟2333
今天
5
0
《Java实践指南》--读后

闲读《Java实践指南》... 1.lvy 某些项目中能够看到ivy.xml。早期使用ant的项目中,常常用ivy.xml来下载项目依赖。 2.ant 作为java程序员,应该都知道ant,虽然可能用过的人不多。为什么ant...

RippleChan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部