html5实现获取地理位置信息并定位

r囧r小猫 2022-04-05 16:20 819阅读 0赞

这里主要讲h5实现获取地理位置信息并定位功能，本文讲解了原生h5，百度地图，谷歌地图等三种获取地理信息并定位的方法，需要的朋友可以参考下：

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

**　　如何使用h5地理位置定位功能**

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

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code>&nbsp;<code>getLocation(){&nbsp;</code> <code>&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(navigator.geolocation){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>navigator.geolocation.getCurrentPosition(showPosition,showError);&nbsp;</code> <code>&nbsp;&nbsp;</code><code>}</code><code>else</code><code>{&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"浏览器不支持地理定位。"</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>}&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

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

我们先来看一下函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式：

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

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

**利用百度地图和谷歌地图接口获取用户地址**

上面我们了解了HTML5的Geolocation可以获取用户的经纬度，那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，则会返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。

我们首先在页面定义要展示地理位置的div，分别定义id\#baidu\_geo和id\#google\_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div\#baidu\_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code>&nbsp;<code>showPosition(position){&nbsp;</code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>latlon&nbsp;=&nbsp;position.coords.latitude+</code><code>','</code><code>+position.coords.longitude;&nbsp;</code> &nbsp; <code>&nbsp;&nbsp;</code><code>//baidu</code> <code>&nbsp;&nbsp;<code>var</code>&nbsp;<code>url&nbsp;=&nbsp;</code><code>"&lt;a&nbsp;href="</code><code>http:</code><code>//api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&amp;callback=renderReverse&amp;location="+latlon+"&amp;output=json&amp;pois=0"&gt;<a href="http://qianduandu.com/redirect/aHR0cDovL2FwaS5tYXAuYmFpZHUuY29tL2dlb2NvZGVyL3YyLz9haz1DOTNiNTE3OGQ3YThlYmRiODMwYjliNTU3YWJjZTc4YiZhbXA7Y2FsbGJhY2s9cmVuZGVyUmV2ZXJzZSZhbXA7bG9jYXRpb249" rel="nofollow">http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&amp;callback=renderReverse&amp;location=</a>"+latlon+"&amp;output=json&amp;pois=0&lt;/a&gt;";&nbsp;</code></code> <code>&nbsp;&nbsp;</code><code>$.ajax({&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:&nbsp;</code><code>"GET"</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>dataType:&nbsp;</code><code>"jsonp"</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:&nbsp;url,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>beforeSend:&nbsp;</code><code>function</code><code>(){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#baidu_geo"</code><code>).html(</code><code>'正在定位...'</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:&nbsp;</code><code>function</code>&nbsp;<code>(json)&nbsp;{&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(json.status==0){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#baidu_geo"</code><code>).html(json.result.formatted_address);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error:&nbsp;</code><code>function</code>&nbsp;<code>(XMLHttpRequest,&nbsp;textStatus,&nbsp;errorThrown)&nbsp;{&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#baidu_geo"</code><code>).html(latlon+</code><code>"地址位置获取失败"</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>&nbsp;&nbsp;</code><code>});&nbsp;</code> <code>});&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
 <tr> 
 <td> <code>function</code>&nbsp;<code>showPosition(position){&nbsp;</code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>latlon&nbsp;=&nbsp;position.coords.latitude+</code><code>','</code><code>+position.coords.longitude;&nbsp;</code> &nbsp; <code>&nbsp;&nbsp;</code><code>//google&nbsp;</code> <code>&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>url&nbsp;=&nbsp;</code><code>'<a href="http://qianduandu.com/redirect/aHR0cDovL21hcHMuZ29vZ2xlLmNuL21hcHMvYXBpL2dlb2NvZGUvanNvbj9sYXRsbmc9" rel="nofollow">http://maps.google.cn/maps/api/geocode/json?latlng=</a>'</code><code>+latlon+</code><code>'&amp;language=CN'</code><code>;&nbsp;</code> <code>&nbsp;&nbsp;</code><code>$.ajax({&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:&nbsp;</code><code>"GET"</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:&nbsp;url,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>beforeSend:&nbsp;</code><code>function</code><code>(){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#google_geo"</code><code>).html(</code><code>'正在定位...'</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:&nbsp;</code><code>function</code>&nbsp;<code>(json)&nbsp;{&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(json.status==</code><code>'OK'</code><code>){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>results&nbsp;=&nbsp;json.results;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.each(results,</code><code>function</code><code>(index,array){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(index==0){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#google_geo"</code><code>).html(array[</code><code>'formatted_address'</code><code>]);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error:&nbsp;</code><code>function</code>&nbsp;<code>(XMLHttpRequest,&nbsp;textStatus,&nbsp;errorThrown)&nbsp;{&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>"#google_geo"</code><code>).html(latlon+</code><code>"地址位置获取失败"</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code> <code>&nbsp;&nbsp;</code><code>});&nbsp;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中，我们可以根据实际情况进行调用。