h5地理定位-Toy模板网

这篇具有很好参考价值的文章主要介绍了h5地理定位。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在项目开发中，总免不了做一些定位的功能。特别是在电商的项目中，做地理定位再正常不过了。当然，说到定位，大家第一反应就是腾讯地图、百度地图、高德地图。不错，其实，我也是用这些。
其实，不管哪个厂家的地图，无外乎都是先拿到当前的经纬度，然后再跟据经纬度做地址解析。当然，最最最最重要的。就是你的协义必须必须是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>

然后，在页面上就会出来一个地图

h5定位,前端,前端,javascript,html

之后，在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);里面的参数有两个，一个是定位成功后的返回，另一个是定位失败的返回。

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模板网！