关于定位功能尝试了很多种方法,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, //是否使用高精度定位,默认:true
timeout: 10000, //超过10秒后停止定位,默认:5s
buttonPosition: "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>
不足之处还望前辈们不吝赐教!谢谢!