直接上代码,代码使用了vue相关的语法 并且引入了dialog插件 ,使用时直接调用getLocation()方法就可以了!

// 定位
function getLocation(){
console.log(navigator)
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
window.console("Geolocation is not supported by this browser.");
_self.$dialog.alert({
message: '您的设备不支持定位功能,请手动选择'
}).then(function(){
_self.$router.push('location');
});
}
}
function showPosition(position){
console.log("Latitude: " + position.coords.latitude +"<br />Longitude: " + position.coords.longitude);
localStorage.setItem('position_lat',position.coords.latitude);
localStorage.setItem('position_long',position.coords.longitude);
var latlon = position.coords.latitude +','+position.coords.longitude;
//baidu
var urlBaidu = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";
var urlGoogle = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; _self.$http.jsonp(urlBaidu).then(function(res){
var res = JSON.parse(res.bodyText);
var locIso = res.result.addressComponent.country_code_iso; if(res.result.addressComponent.country !='China'){
_self.$dialog.confirm({
message: '根据定位,您所在的区域尚未开放服务,是否手动选择区域'
}).then(function(){
localStorage.setItem('position_loc',res.result.addressComponent.country);
_self.$router.push('location');
}).catch(function(){
});
}else{
localStorage.setItem('position_loc',_self.Kit.getCountryMcc(locIso));
_self.$router.push('home');
}
},function(res){
console.log(res);
})
}
function showError(error) {
localStorage.removeItem('position_loc');
switch (error.code) {
case error.PERMISSION_DENIED:
// 用于本地测试
_self.$dialog.alert({
message: '您已拒绝请求地理位置信息'
}).then(function(){
_self.$router.push('location');
});
break;
case error.POSITION_UNAVAILABLE:
_self.$dialog.alert({
message: '位置信息不可用,请手动选择'
}).then(function(){
_self.$router.push('location');
});
break;
case error.TIMEOUT:
_self.$dialog.alert({
message: '请求获取用户位置超时,请手动选择'
}).then(function(){
_self.$router.push('location');
});
break;
case error.UNKNOWN_ERROR:
_self.$dialog.alert({
message: '定位系统失效,请手动选择'
}).then(function(){
_self.$router.push('location');
});
break;
}
}

  

h5 实现定位的更多相关文章

  1. appium使用H5怎么定位元素

    允许是一个class,如果遇到有多个class,只能填写一个. 对于移动端H5元素定位采用Chromedriver的解决方案,具体操作如下: 1.手机安装Chrome浏览器 2.开启USB调试模式,并 ...

  2. 混合元素app的H5元素定位

    问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...

  3. python+Appium自动化:H5元素定位

    问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...

  4. Android WebView 支持H5的定位Js

    //启用数据库 webSettings.setDatabaseEnabled(true); String dir = this.getApplicationContext().getDir(" ...

  5. H5地理位置定位

    一:介绍使用的知识点 1.地理定位的原理 2.geolocation对象 3.Geolocation Api 4.getCurrentPosition的第一个参数 5.getCurrentPositi ...

  6. H5地理定位获取用户当前位置、城市

    第一步:需要在百度地图开发者平台创建一个应用:http://lbsyun.baidu.com/apiconsole/key/create 配置信息 申请配置成功以后返回一个AK 第二步:引入百度地图的 ...

  7. 微信7.0以后更新后H5页面定位不准确

    在有定位的页面,微信更新完7.0以后定位也不提醒说是否同意定位 然后定位都跑到几百公里以外的地方了,然后怎么百度都不知道是啥问题,后面问了前端说微信更了7.0以后好像HTTP的就不支持了,然后我就去百 ...

  8. H5结合百度map实现GPS定位

    前言 目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市.按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称. 1.查 ...

  9. 滑屏 H5 开发实践九问

    滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传.广告.招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大.如今滑屏H5可谓玲琅满目,数不尽数. 作为一个 ...

随机推荐

  1. 安装Conda并在Conda下安装jupyter notebook

    1:安装 conda install jupyter notebook 2:启动 jupyter notebook

  2. 库存秒杀问题-redis解决方案- 接口限流

    <?php/** * Created by PhpStorm. * redis 销量超卖秒杀解决方案 * redis 文档:http://doc.redisfans.com/ * ab -n 1 ...

  3. GLSL传递数组

    static const char *microshaderFragSource = { "varying vec4 color;\n" "uniform bool te ...

  4. C# TreeView 拖拽节点到另一个容器Panel中简单实现

    C# TreeView 拖拽节点到另一个容器Panel中简单实现 用了这么久C#拖拽功能一直没有用到也就没用过,今天因为项目需要,领导特地给我简单讲解了下拖拽功能,真是的大师讲解一点通啊.特地写一篇博 ...

  5. IOS如何安装ipa文件

    https://www.i4.cn/pro_ios.html#jiaocheng 用电脑下载 爱思助手PC端 然后电脑连接 苹果手机, 用 安装的 爱思助手PC端 软件 安装 “爱思助手移动端” 下载 ...

  6. [Manthan, Codefest 18][Codeforces 1037F. Maximum Reduction]

    题目链接:1037F - Maximum Reduction 题目大意:给出一段代码,给你一个长度为n的数组和数字k,求程序运行结果,mod 1e9+7输出 简单翻译下代码的意思,初始定义一个空数组b ...

  7. C/C++预处理器

    关于预处理器 首先时预处理器的条件指令 什么是预处理指令? 预处理指令是以#号开头的代码行.#号必须是该行除了任何空白字符外的第一个字符.#后是指令关键字,在关键字和#号之间允许存在任意个数的空白字符 ...

  8. Oracle课程档案,第五天

    集合操作 desc job_history:改变历史职位 job_history:历史表 vnion:重复值只保留一个 去除重复值 ★★ vnion all: 把所有重复值保留 不去除重复值★★ in ...

  9. Java 将word转为pdf jacob方式

    package com.doctopdf; import java.io.File; import com.jacob.activeX.ActiveXComponent; import com.jac ...

  10. 队列模拟基本操作I

    看到这道题,第一个想法就是“搜索”!“回溯”!的确,这种思路是很正确的,BFS和DFS都可以来解决: #include <cstdlib> #include <cstring> ...