直接上代码,代码使用了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. 23命令模式Command

    一.什么是命令模式 Command模式也叫命令模式 ,是行为设计模 式的一种.Command模式通过被称为 Command的类封装了对目标对象的调用行为以及调用参数. 二.命令模式的应用场景 在面向对 ...

  2. makefile 常用函数

    Linux下编译c/c++源码需要编写makefile文件,文章参看 http://blog.sina.com.cn/s/blog_4c4d6e74010009jr.html 一函数的调用语法 二字符 ...

  3. php处理数据分组问题

    很简单的一个需求,将数据库取出的二维数组进行按照id分组,同组的数据用逗号连接,例如: 处理为 就是按照id分组,name进行逗号拼接. 那么按照数据库的思路来说,采用group_concat即可,如 ...

  4. 10.Oracle Golden Date(ogg)的搭建和管理

    一. GoldenGate 概述 GoldenGate现在是业内成熟的数据容灾与复制产品:GoldenGate是一种基于日志的结构化数据复制方式,它通过解析源数据库在线日志或归档日志获得数据的增删改变 ...

  5. java的同步方法和同步代码块,对象锁,类锁区别

    /** * @author admin * @date 2018/1/12 9:48 * 作用在同一个实例对象上讨论 * synchronized同步方法的测试 * 两个线程,一个线程调用synchr ...

  6. kafka---->kafka stream的使用(一)

    kafka stream的简单使用,这里是官方文档上面的例子. kafka的简单使用 一.启动Kafka server huhx@gohuhx:~/server/kafka_2.11-1.1.0$ b ...

  7. 15 VScode 使用相关

    1.生成html头文件 ①:按下!键 ②:连按两下tab键  即可

  8. javascript 关键字高亮显示实现代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. gui小计算器的程序写法

    import java.awt.BorderLayout; import java.awt.EventQueue; import javax.swing.JFrame; import javax.sw ...

  10. 悬线法 || BZOJ3039: 玉蟾宫 || Luogu P4147 玉蟾宫

    题面: P4147 玉蟾宫 题解:过于板子举报了 #include<cstdio> #include<cstring> #include<iostream> #de ...