首页 > 代码库 > 手机端APP/ 手机浏览器 Html5自动定位城市
手机端APP/ 手机浏览器 Html5自动定位城市
第一步：简单了解
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: window.google = window.google || {}; google.maps = google.maps || {}; (function() { function getScript(src) { document.write(‘<‘ + ‘script src="http://www.mamicode.com/‘ + src + ‘"‘ + ‘ type="text/javascript"><‘ + ‘/script>‘); } var modules = google.maps.modules = {}; google.maps.__gjsload__ = function(name, text) { modules[name] = text; }; google.maps.Load = function(apiLoad) { delete google.maps.Load; apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026","http://mt1.googleapis.com/vt?lyrs=m@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026"],null,null,null,null,"m@262000000",["https://mts0.google.com/vt?lyrs=m@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026","https://mts1.google.com/vt?lyrs=m@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026"]],[["http://khm0.googleapis.com/kh?v=150\u0026hl=zh-CN\u0026","http://khm1.googleapis.com/kh?v=150\u0026hl=zh-CN\u0026"],null,null,null,1,"150",["https://khms0.google.com/kh?v=150\u0026hl=zh-CN\u0026","https://khms1.google.com/kh?v=150\u0026hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/vt?lyrs=h@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026","http://mt1.googleapis.com/vt?lyrs=h@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026"],null,null,null,null,"h@262000000",["https://mts0.google.com/vt?lyrs=h@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026","https://mts1.google.com/vt?lyrs=h@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026"]],[["http://mt0.googleapis.com/vt?lyrs=t@132,r@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026","http://mt1.googleapis.com/vt?lyrs=t@132,r@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026"],null,null,null,null,"t@132,r@262000000",["https://mts0.google.com/vt?lyrs=t@132,r@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026","https://mts1.google.com/vt?lyrs=t@132,r@262000000\u0026src=http://www.mamicode.com/api/u0026hl=zh-CN/u0026"]],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=84\u0026hl=zh-CN\u0026","http://khm1.googleapis.com/kh?v=84\u0026hl=zh-CN\u0026"],null,null,null,null,"84",["https://khms0.google.com/kh?v=84\u0026hl=zh-CN\u0026","https://khms1.google.com/kh?v=84\u0026hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/mapslt?hl=zh-CN\u0026","http://mt1.googleapis.com/mapslt?hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=zh-CN\u0026","http://mt1.googleapis.com/mapslt/ft?hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/vt?hl=zh-CN\u0026","http://mt1.googleapis.com/vt?hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=zh-CN\u0026","http://mt1.googleapis.com/mapslt/loom?hl=zh-CN\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=zh-CN\u0026","https://mts1.googleapis.com/mapslt?hl=zh-CN\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=zh-CN\u0026","https://mts1.googleapis.com/mapslt/ft?hl=zh-CN\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=zh-CN\u0026","https://mts1.googleapis.com/mapslt/loom?hl=zh-CN\u0026"]]],["zh-CN","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/17/0","3.17.0"],[3278673121],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=150\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",262000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",262000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"m",262000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"m",262000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",132],[0,"r",132000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",132],[0,"r",132000000]],[null,"zh-CN","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"zh-CN","US",null,18],0],[null,null,[null,"zh-CN","US",null,18],3],[null,null,[null,"zh-CN","US",null,18],6],[null,null,[null,"zh-CN","US",null,18],0],["https://mts0.google.com/vt","https://mts1.google.com/vt"],"/maps/vt"],2,500,["http://geo0.ggpht.com/cbk?cb_client=maps_sv.uv_api_demo","http://www.gstatic.com/landmark/tour","http://www.gstatic.com/landmark/config","/maps/preview/reveal?authuser=0","/maps/preview/log204","/gen204?tbm=map","http://static.panoramio.com.storage.googleapis.com/photos/"]], loadScriptTime); }; var loadScriptTime = (new Date).getTime(); getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/17/0/main.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("获取位置失败");
}
});
}