踩坑记录：
- window.navigator.geolocation.getCurrentPosition，在IOS10系统中无法定位问题 解决办法如下:
01). 将网站的http 改成https (这个要借助服务端 前端自己无法解决) ；
02). 通过第三方解决 也是我目前在使用的(也是这篇文章要说明的_);
vue 中的index.html 引入js
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak密钥可从百度获取"></script>
// 我的个人百度测试密钥 ak = gbp4dmVIjWeG3sjCETBdwaqPE0rHpQLM
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
//两个js 都需要引入 缺一不可
- new BMap.Geolocation() 详细代码 如下 ：
需求 ：页面渲染地图 点击地图位置 获取具体地址详细信息
<template>
<div class="container">
<div id="allmap" class="map"></div>
<p class="errortext" ref="errtext"></p>
</div>
</template>
<script>
export default {
data() {
return {
options :{
enableHighAccuracy: true, // --->是否获取更精确的位置 true/false
timeout: 5000, // --->请求超时时间,单位ms；
maximumAge: 0
}
};
},
created() {
// 百度地图API功能
this.$nextTick(()=>{
this.getLocation()
let watch1 = window.navigator.geolocation.watchPosition(this.getLocation); // watchPosition()方法：不停的获取和更新用户的地理位置信息，执行间隔时间0ms；当设备地理位置发生改变时，自动调用； 好像删除也么有影响
console.log(watch1)
//清除watch1
window.navigator.geolocation.clearWatch(watch1);
})
},
methods: {
getLocation(){
if (navigator.geolocation){
let geolocation = new BMap.Geolocation() ; // 将navigator.geolocation 替换成 new BMap.Geolocation() 完美解决window.navigator.geolocation.getCurrentPosition，在IOS10系统中无法定位问题
geolocation.getCurrentPosition((position)=>{
console.log(position)
let x= position.latitude ; // ---> 与H5 中的地理定位 若navigator.geolocation.getCurrentPosition(success,error,options) 则 let x = position.coords.latitude 一样 纬度
let y= position.longitude; // 经度
this.print(y,x)
},(error)=>{
switch (error.code) {
case error.PERMISSION_DENIED:
this.$refs.errortext.innerText = error.code +":User denied the request for Geolocation."// code == 1 用户拒绝
break;
case error.POSITION_UNAVAILABLE:
this.$refs.errortext.innerText = "Location information is unavailable."// code == 2 无法获取
break;
case error.TIMEOUT:
this.$refs.errortext.innerText = "The request to get user location timed out."// code == 3 请求超时
break;
case error.UNKNOWN_ERROR:
this.$refs.texterror.innerText = "An unknown error occurred." //一个未知的错误
break;
}
},this.options);
}
},
print(y,x){
let that = this;
let point = new BMap.Point(y,x);// -----> 当前y,x 坐标 是实时动态的经纬度值
console.log(point)
let map = new BMap.Map("allmap"); // --->创建一个map实例 id='allmap' allmap是显示地图的元素的id
console.log(map)
map.centerAndZoom(point,18);// --> 显示级数越大越细
map.addOverlay(new BMap.Marker(point));// ---->定点坐标红点覆盖
map.enableScrollWheelZoom(true);
let geoc = new BMap.Geocoder(); // --> 创建BMap.Geocoder 实例
map.addEventListener("click", function(e){
/** 通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度 */
let pt = e.point;
console.log(pt)
geoc.getLocation(pt, function(rs){
/** addressComponents对象可以获取到详细的地址信息 */
let addComp = rs.addressComponents;
console.log(addComp)
let site = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
console.log(site )
that.$refs.errortext.innerText = site
});
});
}
}
};
</script>
<style scoped>
#allmap {
width: 20rem;
height: 20rem;
margin:50px auto;
}
.text{
height: 1.25rem;
color:red;
line-height: 1.25rem;
}
</style>
是否允许使用地址.jpeg
地图显示.jpeg
显示具体地址信息.jpeg
之前一直纠结于 用H5 的navigator.geolocation 一直没有成功 （是不是因为我本地项目的原因呢 目前不晓得……）以上的方法亲测没有问题
参考文章 转自https://blog.csdn.net/for12/article/details/52803787和https://blog.csdn.net/zyz00000000/article/details/82774543
网友评论