欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

VUE2.0+ 腾讯地图+ 实现精确定位和地址解析

最编程 2024-07-09 07:59:30
...

近期在做某个县的污水排口普查功能，需要定位当前的位置坐标及当前地址信息，并将当前位置绘制到项目中的地图上，在地图上显示，项目使用的地图是arcgsi天地图。用到的是腾讯地图的地址解析（地址转坐标）服务。

准备工作，申请腾讯key，参考https://blog.****.net/weixin_53579656/article/details/129847142

腾讯地图服务地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

首先替换申请好的KEY，并将该条scrpit脚本放到index.html <head>标签中</head>，并引用geolocation.min.js 网上下载即可

 <script src="https://map.qq.com/api/gljs?v=1.exp&key=您的key"></script>
   <script src="./geolocation.min.js"></script>
第二：新建registerIndex.vue页面，名字随意，这是我项目中的名字。在template标签中
<div id="mymap" style="display: none;"></div>
在页面的data函数中定义 如下属性
 data() {
        return {
            activeNames: [0, 1, 2],
            // 腾讯定位服务 - 安全域名设置，添加https://apis.map.qq.com
            qqmapsdk: null, // 腾讯sdk
            key: 您的key', // 腾讯key
            type: 'gcj02', //  wgs84: 返回GPS坐标，gcj02: 返回国测局坐标
            address: {}, // 详细地址信息
            }
}

第三：在methods方法中增加获取当前位置及地址解析方法

 //获取我的位置
        GetLocation() {
            var options = { timeout: 5000 };//设置定位超时
            this.$nextTick(el => {
                var geolocation = new qq.maps.Geolocation(this.key, "myapp");
                geolocation.getLocation(this.showPosition, this.errorPosition, options);
            })
        },
        //失败的回调
        errorPosition() {
            alert('获取位置失败')
        },
        showPosition(position) {
            let _self = this;
            /*初始化经纬度*/
            var curLongitude = (position.lng);
            var curLatitude = (position.lat);
            _self.originLoacl.longitude = curLongitude;
            _self.originLoacl.latitude = curLatitude;
            // 将定位接口获得的坐标转换成我们地图的坐标系WGS84，这步骤特别重要，因为腾讯地图和项目中地图坐标系不一致，需要转化
            let tt = gcj02towgs84(curLongitude, curLatitude)
            let x = tt[0]
            let y = tt[1]
            _self.currentLoacl.longitude = x;
            _self.currentLoacl.latitude = y;
            _self.$arcgis.setMapCenter(x, y)

            this.getAreaCode(curLatitude, curLongitude)
            this.formdata.longitude = x;
            this.formdata.latitude = y;
            this.createMapPoint("CurrentLocalLayer", this.currentLocalIcon, this.currentLoacl)
        },
        //地址逆解析获取详细地址
        //维度 经度
        getAreaCode(lat, lng) {
            let that = this;
            //这里可以直接this.$jsonp地址传入你的经纬度;
            that.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
                location: `${lat},${lng}`, // 经纬度
                key: that.key, //这里就是要开启那个service不然会报错让你开启
                output: "jsonp", // output必须jsonp   不然会超时
            }).then((res) => {
                //获取到的res 就是继续的地址的所有信息;
                that.address = res.result.address;//当前地址
                console.log(lng, lat);
            });
        },

　关键点在于坐标转换，由于项目中用到的是两个地图，仅使用腾讯地图获取当前地址、及当前位置，一开始没有进行坐标转换，导致地址正确，但是将坐标渲染到项目地图上时出现了偏差。如果仅仅使用腾讯地图，转换操作可以直接去掉。

坐标转换方法

// 定义一些常量
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323;

/**
 * GCJ02（火星坐标系） 转换为 WGS84 / 即谷歌高德转WGS84
 * @param { Number } lng
 * @param { Number } lat
 */
export function gcj02towgs84(lng, lat) {
    if (outOfChina(lng, lat)) {
        return [lng, lat]
    }
    else {
        var dlat = transformlat(lng - 105.0, lat - 35.0)
        var dlng = transformlng(lng - 105.0, lat - 35.0)
        var radlat = lat / 180.0 * PI
        var magic = Math.sin(radlat)
        magic = 1 - ee * magic * magic
        var sqrtmagic = Math.sqrt(magic)
        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
        const mglat = lat + dlat
        const mglng = lng + dlng
        return [lng * 2 - mglng, lat * 2 - mglat]
    }
}
View Code

 

上一篇： VUE3.0 多附件上传，支持 word、xls、pdf、png

下一篇： 集合工具类概述和使用

推荐阅读