手机端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="‘ + 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/[email protected]\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=zh-CN\u0026"],null,null,null,null,"[email protected]",["https://mts0.google.com/[email protected]\u0026src=api\u0026hl=zh-CN\u0026","https://mts1.google.com/[email protected]\u0026src=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/[email protected]\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/[email protected]\u0026src=api\u0026hl=zh-CN\u0026"],null,null,null,null,"[email protected]",["https://mts0.google.com/[email protected]\u0026src=api\u0026hl=zh-CN\u0026","https://mts1.google.com/[email protected]\u0026src=api\u0026hl=zh-CN\u0026"]],[["http://mt0.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=zh-CN\u0026","http://mt1.googleapis.com/[email protected],[email protected]\u0026src=api\u0026hl=zh-CN\u0026"],null,null,null,null,"[email protected],[email protected]",["https://mts0.google.com/[email protected],[email protected]\u0026src=api\u0026hl=zh-CN\u0026","https://mts1.google.com/[email protected],[email protected]\u0026src=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("获取位置失败");

　　　}

});

}

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

时间： 2024-12-14 03:24:03

手机端APP/ 手机浏览器 Html5自动定位城市的相关文章

11.采集手机端app企查查上司公司数据

---恢复内容开始--- 采集企查查手机端app数据: 1.首先手机端安装app并usb连接电脑端,fiddler监控手机请求数据对数据进行分析抓取. 手机端界面与fiddler界面参照: 2.对获取到url进行分析 试采集当前页面信息: 3.分析动态加载需要请求的参数及进一步深度urlhttps://appv3.qichacha.net/app/v1/other/IPOCompanySearch?searchKey=&sign=bbdb1ed793cb244e4bfb4b9b120984ce3

【重播工具箱】MTK全方案手机端APP，一键备份自动生成线刷包 源码思路解析

这个是本人MTK工具箱,在 5月份的时候,发布的..功能可能说是全球首发把,第一个手机MTK的一键备份工具,而且是兼容MTK全方案.MTK6589 MTK6592 6575 82等, 现在将源码以及思路,分享给大家,有兴趣的可以看看. 源码解析以及思路,待发布....... 分享地址:http://www.592zn.com/thread-311286-1-1.html 下载地址http://pan.baidu.com/s/1hqeethy重大更新: 1.手机端首发,备份MTK系列全自动,生成线

通过chrome识别手机端app元素--Chrome:inspector/#device

现实中应该有这样一种情况,就是一个app只支持手机端使用,同时他又是hybrid的,那么其中的webview部分的元素属性如何去获得呢? 使用下面的方法可以解决这个问题: 调试 Android Chrome 方法:打开 Android 自带 USB 调试,并将手机连接电脑. 1.打开 Android端的Chrome,并打开你的页面或应用 2.打开PC/Mac 上的 Chrome,打开 chrome://inspect/#devices 3.正常情况会失败到连接上的手机 4.勾选 Discover

PHP判断用户是手机端？还是浏览器端访问？

function isMobile(){ $useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ''; $useragent_commentsblock=preg_match('|\(.*?\)|',$useragent,$matches)>0?$matches[0]:''; function CheckSubstrs($substrs,$text){ foreach($substrs as $

手机端app开发初识

1.所需软件说明 百度云下载链接: https://pan.baidu.com/s/1-TEQZP9QbJSlGSYedyAUFw密码: 2z8l 或者官方链接: Hbuilder:http://www.dcloud.io/ 夜神模拟器:https://www.yeshen.com/ 1.1 Hbuilder HTML开发工具,强大的代码助手帮你快速完成开发,当中对于大众来说最友好的可能是它所具有的的提示功能以及官方文档的代码块功能,它提供给了我们完善的组件,帮助我们快速开发相应的功能块 1.2

PC端写的API接口和手机端APP联合调试

一.遇到问题的情况:项目框架:asp.net MVC5 ,写的给手机端调用的API接口. 二.自己在本地 IIS上部署项目,在手机端的请求服务器上把地址和端口换上本地部署的,如图所示 三.用管理员的身份打开VS,打开项目.找到调试-->附加到进程 找到部署项目运行对应的进程,选择后添加添加. 然后你的程序也就 进入调试模式,从APP上调用接口,就可以进入到PC端的调试模式,看看传参对不对,PC端代码逻辑等bug调试. 原文地址:https://www.cnblogs.com/ElvisZhong

js的let语句在安卓手机端的QQ浏览器出错的问题

关于JavaScript里面的let,let 语句可以声明一个块级作用域的本地变量,并且可选的将其初始化为一个值. <ul id="list"> </ul> var list = document.getElementById("list"); for (var i = 1; i <= 5; i++) { var item = document.createElement("LI"); item.appendChil

js判断手机端(Android手机还是iPhone手机)

现在使用手机上网的人越来越多,一些下载网站会通过判断不同系统手机来访问不同网页,比如iPhone和Android.下面我们就来介绍一下如何用javascript判断iPhone或Android手机访问 网上常用的代码    /** * [isMobile 判断平台] * @param test: 0:iPhone    1:Android */function ismobile(test){    var u = navigator.userAgent, app = navigator.appV

js判断手机端Android手机还是iPhone手机

<script type="text/javascript"> function fBrowserRedirect(){ var sUserAgent = navigator.userAgent.toLowerCase(); alert(sUserAgent); //获取浏览器和手机的信息 //匹配信息里的关键字 var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sU