h5 实现定位
直接上代码,代码使用了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 实现定位的更多相关文章
- appium使用H5怎么定位元素
允许是一个class,如果遇到有多个class,只能填写一个. 对于移动端H5元素定位采用Chromedriver的解决方案,具体操作如下: 1.手机安装Chrome浏览器 2.开启USB调试模式,并 ...
- 混合元素app的H5元素定位
问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...
- python+Appium自动化:H5元素定位
问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...
- Android WebView 支持H5的定位Js
//启用数据库 webSettings.setDatabaseEnabled(true); String dir = this.getApplicationContext().getDir(" ...
- H5地理位置定位
一:介绍使用的知识点 1.地理定位的原理 2.geolocation对象 3.Geolocation Api 4.getCurrentPosition的第一个参数 5.getCurrentPositi ...
- H5地理定位获取用户当前位置、城市
第一步:需要在百度地图开发者平台创建一个应用:http://lbsyun.baidu.com/apiconsole/key/create 配置信息 申请配置成功以后返回一个AK 第二步:引入百度地图的 ...
- 微信7.0以后更新后H5页面定位不准确
在有定位的页面,微信更新完7.0以后定位也不提醒说是否同意定位 然后定位都跑到几百公里以外的地方了,然后怎么百度都不知道是啥问题,后面问了前端说微信更了7.0以后好像HTTP的就不支持了,然后我就去百 ...
- H5结合百度map实现GPS定位
前言 目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市.按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称. 1.查 ...
- 滑屏 H5 开发实践九问
滑屏的交互形式自从在 H5 中流行起来,便广泛应用在产品宣传.广告.招聘和活动运营等场景中,作为微信朋友圈广告惯用的形式,其影响力更是得到了强化与放大.如今滑屏H5可谓玲琅满目,数不尽数. 作为一个 ...
随机推荐
- MySQL 千万 级数据量根据(索引)优化 查询 速度
一.索引的作用 索引通俗来讲就相当于书的目录,当我们根据条件查询的时候,没有索引,便需要全表扫描,数据量少还可以,一旦数据量超过百万甚至千万,一条查询sql执行往往需要几十秒甚至更多,5秒以上就已经让 ...
- C# WinForm窗体控件GroupBox修改边框颜色控件
C# WinForm窗体控件GroupBox修改边框颜色控件 1.新建组件这里可以自定义一个GroupBox控件起名为GroupBoxEx 2.增加一个BoderColor属性 private Col ...
- [原]CentOS 7 chrony 笔记
~]# timedatectl status Local -- :: CST ==> 本地系统实际时间,设置时间timedatectl set-:: 设置日期timedatectl set- 设 ...
- jvm.option是什么,它是如何加载的
jvm.option是一些程序里边的java的配置参数的一个集合,不同的应用都会定义自己的jvm.options用来控制一些jvm的参数 以下,以elasticsearch为例,来说明它是如何加载的 ...
- centos 安装python PIL模块
转载:https://www.cnblogs.com/ccdc/p/4069112.html 1.安装 使用yum安装缺少类库: #尤其重要,否则会报错 yum install python-deve ...
- ubuntu 忽略文件的50unattended升级问题
ubuntu出现这样问题 既然说那个文件扩展名无效,那干脆直接把那个文件删掉 sudo rm /etc/apt/apt.conf.d/20auto-upgrades.ucf-old 删掉之后应该就不会 ...
- 矩阵取数问题(dp,高精)
题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n×mn \times mn×m的矩阵,矩阵中的每个元素ai,ja_{i,j}ai,j均为非负整数.游戏规则如下: 每次取数时须从每行各取走 ...
- vue利用vue ui命令创建项目
上次用git bash,用create 命令创建vue项目,这是玩个炫酷的------vue ui (前提是有安装node.js). 在目标文件 vue ui 可以看到他在8000端口出现了一个gu ...
- 移动端如何用swiper实现导航栏效果
在移动端如何用swiper实现导航栏效果 我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能:而这个功能如果自己写的话会很麻烦,所以我在这推荐一下swiper这个插件. 其实swiper中的官 ...
- Android 函数
inflate: https://blog.csdn.net/u012702547/article/details/52628453 public View inflate(XmlPullParser ...