手机端APP/ 手机浏览器 Html5自动定位城市

时间：2014-05-26 06:53:12 阅读：370 评论：0 收藏：0 [点我收藏+]

标签：style c code java ext http

第一步：简单了解

html5为window.navigator提供了geolocation属性，用于获取基于浏览器的当前用户地理位置。

window.navigator.geolocation提供了3个方法分别是：

void getCurrentPosition(onSuccess,onError,options);//获取用户当前位置

int watchCurrentPosition(onSuccess,onError,options);//持续获取当前用户位置

void clearWatch(watchId);//watchId 为watchCurrentPosition返回的值//取消监控

支持参数：//options可以不写，为默认即可

options = { enableHighAccuracy,//boolean 是否要求高精度的地理信息 timeout,//获取信息的超时限制 maximumAge//对地理信息进行缓存的时间 }

第二步：Html 5 geolocation 实例代码如下：

$(document).bind("pageinit", function (event, data) {

getLocation();

});

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(

showPosition,//成功回调函数

getPositionError,//失败回调函数

{//options参数配置

enableHighAccuracy:true,//boolean 是否要求高精度的地理信息

timeout:2000,

maximumAge:36000

}

);

}

else { //不支持，就拉倒吧。 }

}

//失败回调函数：

function getPositionError(error){

switch(error.code){

case error.TIMEOUT:

// alert("连接超时，请重试");

break;

case error.PERMISSION_DENIED:

//alert("您拒绝了使用位置共享服务，查询已取消");

break;

case error.POSITION_UNAVAILABLE:

//alert("亲爱的火星网友，非常抱歉，我们暂时无法为您所在的星球提供位置服务");

break;

}

//成功回调函数：

function showPosition(position) {

//内容在下面说。

}

成功返回的结果说明position：

当成功获取地理位置信息时候，onsuccess方法中会返回position对象，通过这个对象可以获取地理位置的相关信息，包括：

position对象的属性：

latitude,//纬度

longitude,//经度

altitude,//海拔高度

accuracy,//获取纬度或者经度的精度

altitudeAccurancy,//海拔高度的精度

heading,//设备前景方向。正北方向的顺时针旋转角

speed,//设备的前进速度 m/s

timestamp,//获取地理位置信息时候的时间

第三步：根据经纬度调用google接口获取

googlemap.js:

成功反馈结果

function showPosition(position) {

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); //初始化一个google的经纬度对象

var geocoder = new google.maps.Geocoder();

geocoder.geocode({ ‘latLng‘: latlng }, function (results, status) {

if (status == google.maps.GeocoderStatus.OK) {

alter(results[0].address_components[2].short_name); //定位城市

}

else

　　 {

　　alert("获取位置失败");

　　　}

});

}

手机端APP/ 手机浏览器 Html5自动定位城市,布布扣,bubuko.com

手机端APP/ 手机浏览器 Html5自动定位城市

标签：style c code java ext http

原文地址：http://www.cnblogs.com/chenly-index/p/3747835.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行