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可谓玲琅满目,数不尽数. 作为一个 ...
随机推荐
- react项目,build以后启动问题
用脚手架create-react-app创建的react项目,已经集成了webpack,只要运行命令:npm run build 项目就会编译成功,生成一个build文件夹,现在问题来了,如何启动这个 ...
- 如何在spring-boot web项目中启用swagger
swagger的三个项目及其作用 我们打开swagger的官网,会发现有三个swagger相关的项目,它们分别是 swagger-editor 作用是通过写代码,生成文档描述(一个json文件或其他格 ...
- Spark Distributed matrix 分布式矩阵
RowMatrix行矩阵 import org.apache.spark.rdd.RDD import org.apache.spark.mllib.linalg.Vectors import org ...
- 从composer上在本地创建一个项目
在想要创建项目的目录下,输入以下代码
- JavaScript原型、闭包、继承和原型链等等总结
参考:http://www.cnblogs.com/wangfupeng1988/tag/%E5%8E%9F%E5%9E%8B%E9%93%BE/
- 查看linux系统的运行级别
查看当前系统的运行级别[root@apenglinux ~]# runlevel3 5查看系统的默认级别[root@apenglinux ~]# systemctl get-defaultgraphi ...
- 防止xss和sql注入:JS特殊字符过滤正则
function stripscript(s) { var pattern = new RegExp("[%--`~!@#$^&*()=|{}':;',\\[\\].<> ...
- python全栈开发 * 30知识点汇总 * 180713
30 re模块2一.正则表达式在线测试 在线测试工具 http://tool.chinaz.com/regex/(一).*?的用法: . 是任意字符 * 是取 0 至 无限长度 ? 是非贪婪模式.合在 ...
- 简单理解php深复制浅复制问题
其实接触深复制浅复制是通过学习c++了解到的,比如c++很好用的模板,php是不允许方法模板和类模板 一个简单的例子,如果不是很了解php 的取地址符&,可以去看下官方文档,php的& ...
- AVL树C++实现(插入,删除,查找,清空,遍历操作)
AVL.h文件代码 #pragma once #include<iostream> #include<stack> #include <assert.h> usin ...