【Uniapp】Uniapp 集成腾讯地图获取当前定位信息

文章目录

  • 【Uniapp】Uniapp 集成腾讯地图获取当前定位信息
  • 微信公众号

【Uniapp】Uniapp 集成腾讯地图获取当前定位信息

同样的还有高德地图,百度地图等可以进行集成,由于保证通用性,这里我们使用的是腾讯地图,因为项目有可能是小程序或者公众号,直接使用腾讯的方便一点

首先腾讯地图开放平台注册账号,并创建一个项目,拿到对应的appKey

在项目的全局常量中加入两个属性,第一个是请求腾讯地图接口的根域名,第二个是上一步注册生成的Key

	mapUrl: 'https://apis.map.qq.com',
	
	mapKay: '你的Kay值',

在uniapp的页面中,增加一个方法

getLocation() {
        that.$msg('定位刷新中');
        uni.getLocation({
          type: 'wgs84',
          success: function (res) {
            that.latitude = res.latitude;
            that.longitude = res.longitude;
            uni.request({
              url: that.$config.mapUrl + '/ws/geocoder/v1/',
              method: 'GET',
              data: {
                location: res.latitude + ',' + res.longitude,
                key: that.$config.mapKay
              },
              success: function (res) {
                let data = res.data;
                if (data.status == 0) {
                  that.$msg('定位刷新成功');
                  that.currLocation = data.result.address_component;
                } else {
                  console.log(data.message);
                }
              },
              fail: function (err) {
                that.$msg('获取定位失败');
                console.log('地址解析失败' + err);
              }
            });
          }
        });
      }

获取的结果示例,下课!

{
    "status": 0,
    "message": "query ok",
    "request_id": "c9ba8680-964a-11ec-8444-b4055d566451",
    "result": {
        "location": {
            "lat": 26.64702,
            "lng": 106.63024
        },
        "address": "贵州省贵阳市观山湖区黔云路",
        "formatted_addresses": {
            "recommend": "观山湖区贵阳市政府(黔云路西)",
            "rough": "观山湖区贵阳市政府(黔云路西)"
        },
        "address_component": {
            "nation": "中国",
            "province": "贵州省",
            "city": "贵阳市",
            "district": "观山湖区",
            "street": "黔云路",
            "street_number": "黔云路"
        },
        "ad_info": {
            "nation_code": "156",
            "adcode": "520115",
            "city_code": "156520100",
            "name": "中国,贵州省,贵阳市,观山湖区",
            "location": {
                "lat": 26.583042,
                "lng": 106.598839
            },
            "nation": "中国",
            "province": "贵州省",
            "city": "贵阳市",
            "district": "观山湖区"
        },
        "address_reference": {
            "street_number": {
                "id": "",
                "title": "",
                "location": {
                    "lat": 26.646906,
                    "lng": 106.630669
                },
                "_distance": 12,
                "_dir_desc": "西"
            },
            "crossroad": {
                "id": "1805183",
                "title": "黔云路/梦草路(路口)",
                "location": {
                    "lat": 26.648649,
                    "lng": 106.630409
                },
                "_distance": 176.6,
                "_dir_desc": "南"
            },
            "town": {
                "id": "520115406",
                "title": "金华园社区服务中心",
                "location": {
                    "lat": 26.653633,
                    "lng": 106.623955
                },
                "_distance": 0,
                "_dir_desc": "内"
            },
            "street": {
                "id": "6119267374065600232",
                "title": "黔云路",
                "location": {
                    "lat": 26.646906,
                    "lng": 106.630669
                },
                "_distance": 12,
                "_dir_desc": "西"
            },
            "landmark_l2": {
                "id": "6162998728074908706",
                "title": "贵阳市政府",
                "location": {
                    "lat": 26.646631,
                    "lng": 106.62822
                },
                "_distance": 0,
                "_dir_desc": "内"
            }
        }
    }
}

微信公众号

你可能感兴趣的:(Uniapp,javascript,前端,腾讯云)