vue定位获取用户位置信息

关于定位功能尝试了很多种方法，h5定位，百度地图定位，高德地图定位，因为ip定位只能定位到城市，所以我选用的是浏览器定位。总结如下：
H5定位：定位相对较准，但是部分浏览器不兼容，我主要是在手机上测试的，UC和百度浏览器还有ios的微信浏览器是兼容的，其他的浏览器如华为浏览器、搜狗浏览器、QQ浏览器、安卓的微信浏览器全都不兼容，后来发现原来是我的网站是http协议的，升级到https协议就好了，但是坐标系不转换误差会比较大。
百度定位：定位的位置与实际位置偏差太大，我从郑州的一个小县城定位到了郑州火车站，偏差18公里，百度官方的示例也是如此。浏览器的兼容性倒是可以，但是偏差太大，因为我要做的是给用户推荐路线，所以这个对我来说已经失去了意义。
高德定位：定位位置最准确，但是不太稳定，有时候能定位成功，有时候定位不成功，官方示例也是这样的，不知道是不是我这边信号的原因，因为稳定性的原因没有测试它的在各个浏览器的运行情况。
定位的能否成功的因素很多：
1.浏览器不支持原生定位接口，如IE较低版本的浏览器等；
2.用户禁用了定位权限，需要用户开启设备和浏览器的定位权限，并在浏览器弹窗中点击“允许使用定位”选项。
3.览器禁止了非安全域的定位请求，比如Chrome、IOS10已陆续禁止，这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位；
4.浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象，另外还有个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。
5.定位失败，Chrome、火狐以及部分套壳浏览器接入的定位服务在国外，有较大限制，失败率高。
影响定位精度的因素：
1.手机是否打开了GPS。
2.天气、建筑物等的影响。
3.坐标系统不同，没有进行换算。
最后,附上我的代码，因为前期做坐标点标注的时候是用的百度地图，所以尽管定位的时候没有用到百度地图，还是把它引入了。我是优先选用H5定位，定位失败的话改用高德地图定位。最后换算成百度坐标实现推荐乘车路线的功能，代码如下：
main.js:

import AMap from "vue-amap";//高德地图
Vue.use(AMap);
AMap.initAMapApiLoader({key: "你的高德key",plugin: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType","AMap.Geolocation"],v: "1.4.4"
});

页面内容：

<template><div class="welcomeNav" v-wechat-title="$route.meta.title"><div class="back">[外链图片转存失败(img-p7JCjXvd-1562206482460)(https://mp.csdn.net/assets/img/back.jpg)]</div><div id="container"></div><!-- 高德地图容器 --><div class="content"><div class="map-area" :id="mapId"></div><!-- 百度地图容器 --></div><bottom></bottom></div>
</template><script>
import { Toast } from "mint-ui";
import { Indicator } from "mint-ui";
import loadBMap from "../assets/js/map.js";
import bottom from "../components/bottom";
import { setTimeout } from "timers";
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {name: "welcomeNav",components: {bottom},data() {return {mapId: "BMap-" + parseInt(Date.now() + Math.random()),myMap: null,keyword: "",lng: 0,lat: 0,success: false,center: [121.59996, 31],ak: "你的百度key",geolocation: {},type3: [550, 30]};},methods: {initMap() {loadBMap(this.ak).then(() => {// 百度地图API功能var self = this;this.myMap = new BMap.Map(this.mapId); // 创建Map实例this.geolocation = new BMap.Geolocation();self.myMap.centerAndZoom(new BMap.Point(113.7235, 34.711), 16);//添加地图类型控件this.myMap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]}));this.myMap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放self.ajax("post", this.host + "/Navigation/selectAll", {}, function(//获取标注点res) {for (var i in res.data) {var point = new BMap.Point(res.data[i].longitude,res.data[i].dimensionality);var marker = new BMap.Marker(point); // 创建标注self.myMap.addOverlay(marker); // 将标注添加到地图中var label = new BMap.Label(res.data[i].label, {offset: new BMap.Size(20, -10)});marker.setLabel(label);}if (res.data.length > 0) {if (navigator.geolocation.getCurrentPosition) {//h5定位Indicator.open("定位中...");navigator.geolocation.getCurrentPosition(function(position) {var p1 = new BMap.Point(position.coords.longitude,position.coords.latitude);setTimeout(function() {var convertor = new BMap.Convertor();var pointArr = [];pointArr.push(p1);convertor.translate(pointArr,self.getTransType(position.coords.accuracy), //获取需转换的类型5,function(data) {if (data.status === 0) {p1 = data.points[0];}var mk = new BMap.Marker(p1);self.myMap.addOverlay(mk); //标出所在地var p2 = new BMap.Point(res.data[0].longitude,res.data[0].dimensionality);var transit = new BMap.TransitRoute(self.myMap, {renderOptions: { map: self.myMap }});transit.search(p1, p2);Indicator.close();});}, 1000);},function(error) {//H5定位失败之后调用高德地图lazyAMapApiLoaderInstance.load().then(() => {var map = new AMap.Map("container", {resizeEnable: true});AMap.plugin("AMap.Geolocation", function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：5sbuttonPosition: "RB", //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点});map.addControl(geolocation);geolocation.getCurrentPosition(function(status,result) {if (status == "complete") {self.lat = result.position.lat;self.lng = result.position.lng;var position = new BMap.Point(self.lng, self.lat);setTimeout(function() {var convertor = new BMap.Convertor();var pointArr = [];pointArr.push(position);convertor.translate(pointArr, 1, 5, function(data) {if (data.status === 0) {var p1 = data.points[0];var p2 = new BMap.Point(res.data[0].longitude,res.data[0].dimensionality);var transit = new BMap.TransitRoute(self.myMap,{renderOptions: { map: self.myMap }});Indicator.close();transit.search(p1, p2);}});}, 1000);}else{Indicator.close();Toast('无法获取您的位置信息');}},function(){Indicator.close();Toast('无法获取您的位置信息');});});});},{ enableHighAccuracy: true, timeout: 5000, maximumAge: 0 });} else {Toast("您的浏览器不支持获取位置信息！");}}});}).catch(err => {Toast("您的浏览器不支持地图的调用！");});},getTransType(accuracy) {if (window.localStorage) {var transType = localStorage.getItem("xdlcfwapp_transType");if (transType != null && transType != "") {return transType;}}for (var i = 0; i < this.type3.length; i++) {if (this.type3[i] == accuracy) {localStorage.setItem("xdlcfwapp_transType", 3);return 3;}}localStorage.setItem("xdlcfwapp_transType", 1);return 1;},search() {}},created() {var self = this;self.initMap();}
};
</script>
<style scoped>
.welcomeNav {padding-top: 44px;padding-bottom: 50px;background-color: #f9f9f9;
}
.content {padding: 8px 0 8px;text-align: center;
}
.bm-view {width: 100%;height: 600px;
}
.search-input {text-indent: 3em;border-radius: 3px;width: 95%;height: 35px;margin: 5px auto 10px;
}
.search {width: 18px;position: absolute;left: 6%;top: 12px;
}
.map-area {width: 100%;height: 500px;
}
</style>

不足之处还望前辈们不吝赐教！谢谢！

vue定位获取用户位置信息相关推荐

手机端定位获取用户位置信息
很多时候,我们需要获取手机端用户的位置信息,当然这需要用户的同意授权才能进行获取,下面介绍下我在项目中使用的定位由于本项目web端使用的是高德地图,因此手机端定位也使用高德的定位接口 <htm ...
uniapp开发获取用户位置信息功能解析
uniapp开发获取用户位置信息功能解析问题描述 uniapp相关接口 1.uni.authorize 提前向用户发起授权请求. 接口描述及demo演示 2.uni.getLocation 获取当前 ...
微信服务号开发-获取用户位置信息
微信服务号开发-获取用户位置信息在微信公众号开发的中,获取用户位置信息是非常常见的功能需求,通过用户的位置信息,可以做一些地图导航,以及基于LBS的营销活动. 下面将介绍微信服务号获取用户位置信息的 ...
微信小程序获取用户位置信息并显示到地图上
1.配置地理位置用途说明在app.json中的大括号内输入 "permission": {"scope.userLocation": {"desc& ...
vue定位---获取当前位置的详细信息
vue如何获取当前位置的详细信息,总共分为5步. 1.在build文件夹下webpack.base.conf.js文件里面的module.exports中添加如下代码: externals: {'BM ...
微信小程序—获取用户位置信息
一.使用 wx.getLocation 获取经纬度信息 1.1 在 app.json 中加入如下配置 "permission": {"scope.userLocation ...
微信小程序（uniapp）获取用户位置信息及选择位置
1. 开发前准备注册微信小程序账号并配置相关信息: 注册腾讯地图开放平台并完成应用创建等: 下载qqmap-wx-jssdk.min.js放到项目中: 2. 获取用户当前位置wx.getLocati ...
uniApp获取用户位置信息两种方法
1.使用uni.chooseLocation获取用户信息 uni.chooseLocation({success: (res) => {console.log('位置名称:' + res.nam ...
微信小程序获取用户位置信息
1.在 app.json 里面增加 permission 属性配置小程序配置 | 微信开放文档 "permission": {"scope.userLocation&qu ...

vue定位获取用户位置信息

vue定位获取用户位置信息相关推荐

最新文章

热门文章

vue定位 获取用户位置信息

vue定位 获取用户位置信息相关推荐

最新文章

热门文章

vue定位获取用户位置信息

vue定位获取用户位置信息相关推荐