在项目开发中，总免不了做一些定位的功能。特别是在电商的项目中，做地理定位再正常不过了。当然， 说到定位，大家第一反应就是腾讯地图、百度地图、高德地图。不错，其实，我也是用这些。
其实，不管哪个厂家的地图，无外乎都是先拿到当前的经纬度，然后再跟据经纬度做地址解析。当然，最最最最重要的。就是你的协义必须必须是https，记住，是https，https。当然，你也可以不用https,只用http，不过，这样定位是不准确的。（如果用http协议，腾讯地图会定位到当前县/区的中心，而百度地图会定位到当前市市中心）
方法一：腾讯地图定位
最简单而且最粗爆的方法就是在html里面直接引入iframe
<div class="modal-content" style="width:100%; height: 500px">
<iframe id="mapPage" style="height: 100%; width: 100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=key的名字"></iframe>
<!--key 和 key的名字在腾讯地图的控制台里有-->
</div>然后，在页面上就会出来一个地图
之后，在js中，写入以下函数
//注意，如果是用jQ写的话，这一段必须被外面一层的$(function(){})里面
//也就是说，下面的那一段函数必须写在$(function(){])里面
//而下面那一串函数的意思就是点击地图上下方的地址列表，它就会相应的定位到那儿
//而同时，也会拿到你当前所点击的地址中相应的一些地理信息
window.addEventListener('message', function (event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data;
if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
console.log(loc) //这儿拿到的就是经纬度还有一些详细的地址什么的，大家可以打印出来看看就明白了。
let poiaddress = loc.poiaddress;
let poiname = loc.poiname;
//console.log(poiaddress + ' ' + poiname)
$('#BaoXiuShenQing_XiangXiWeiZhi').val(poiaddress)
$('#BaoXiuShenQing_XiangXiWeiZhi').css({
fontSize:'12px'
})
}
}, false)方法二：h5地理定位
然而，在h5中，也提供了一个地理定位的方法。该方法在菜鸟教程那儿也能很容易找到。
该方法的名字是 navigator.geolocation.getCurrentPosition(success,error);里面的参数有两个，一个是定位成功后的返回，另一个是定位失败的返回。文章来源：https://www.toymoban.com/news/detail-613520.html
h5Position() {
return new Promise((resolve, reject) => {
//resolve({ bol: true, longitude: 116.104904, latitude: 24.277311 })
if (navigator.geolocation) {
let params = {
enableHighAccuracy: true, //表示是否允许使用高精度
geocode: true //是否解析地址信息。解析的地址信息保存到Position对象的address、addresses属性中
//详细的参数可以参考 https://blog.csdn.net/weixin_30408739/article/details/99012875
}
navigator.geolocation.getCurrentPosition((position) => {
let longitude = position.coords.longitude //经度
let latitude = position.coords.latitude //纬度
resolve({ bol: true, longitude: longitude, latitude: latitude })
}, (error) => {
reject({ bol: false, msg: '获取经纬度失败' })
});
} else {
reject({ bol: false, msg: '您的设备不支持卫星定位,请手动选择' })
}
})
},QQMap(longitude, latitude) { //腾讯地图里的经纬度解析实际地址：如 广东省广州市XXX....
return new Promise((resolve, reject) => {
let xy = latitude + ',' + longitude
$.ajax({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + xy + '&key=你的key&get_poi=1',
data: {
output: 'jsonp' //这个必须得这么写
},
dataType: 'jsonp', //这个也一样，必须得这么写
})
.done(res => {
let obj = {
longitude: longitude,
latitude: latitude,
address: res.result.address,
}
resolve({ bol: true, xyAddress: obj, all: res })
})
.fail(err => {
reject({ bol: false, msg: '获取地址失败,请手动选择' })
})
})
},那么，这两串代码结合起来的话，就是长这么的样子文章来源地址https://www.toymoban.com/news/detail-613520.html
getAddress(){
this.h5Position()
.then(res=>{
let longitude = res.longitude;
let latitude = res.latitude;
return this.QQMap(longitude , latitude)
})
.then(res=>{
//这儿得到的就是腾讯地图中用经纬度解析到的详细地址
//里面是一个大对象，包含了当前定位的推荐地址和粗操地址
//同时，也包含了当前定位中的周边地址，类似你打开微信定位里，有周边推荐的门店什么的
console.log(res);
})
}到了这里，关于h5地理定位的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
