uni-app 微信小程序 用高德sdk获取地理位置,以及天气信息

uni-app 微信小程序采用高德sdk获取地理位置和天气信息主要有以下几个步骤:

1. 注册高德开发者,并获取应用key

    概述-微信小程序插件 | 高德地图API

在这个网页最下面,按步骤来就可以了。注意创建完应用后,点击添加按钮,选择小程序sdk 生成key。最后生成的key如下所示:

 2. 下载高德小程序sdk,并放在uni-app项目中

相关下载-微信小程序插件 | 高德地图API

3. 使用高德小程序sdk 获取地理位置接口,天气信息接口

import amap from "@/libs/gaode/amap-wx.130.js";

  created() {
    this.amapPlugin = new amap.AMapWX({
      key: "fc60464e53ac5bfc1f933d9b5e0a0a3b",
    });
    this.getLocation();
  },

  methods: {
    async getLocation() {      
      const res = await checkAuthorize("userLocation");
      if (res.success) {
        this.getRegeo();
      }
    },
    getRegeo() {
      const that = this;
      uni.showLoading({
        title: "获取信息中",
      });      
      this.amapPlugin.getRegeo({
        success(data) {          
          that.loc = data[0].name;                  
          uni.hideLoading();
        },
        fail(err){ //不加此字段控制台会报错
          console.log('fail')
        }
      });
      this.amapPlugin.getWeather({
        success(res){
          console.log('liubbc weather: ', res)
          that.imgList[4].name = res.humidity.data
          that.temperature = res.temperature.data
          that.weather = res.weather.data
          that.imgList[1].name = res.windpower.data
          that.time = res.liveData.reporttime
        },
        fail(err){
          console.log('fail')
        }
      })
    },
  },

注意在接口传递参数中要加上fail 字段,否则控制台会报错。

4. 添加服务器域名(https://restapi.amap.com)

    你可能在开发微信开发者工具中,以及真机调试中都能获取地理位置和天气信息,但发布到体验版,或发布到线上,一直loading 获取不到天气信息,这是因为没有把高德小程序sdk接口用到的URL地址添加到小程序服务器域名中。

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值