微信小程序免费高德地图API——获取天气教程

前端

2023-12-07 04:37:03

微信小程序免费高德地图API——获取天气教程

注册高德地图开发者账号

第一步是创建高德地图开发者账号。在高德地图开发者网站上完成注册后，登录即可。

申请高德地图API密钥

登录后，在控制台页面申请高德地图API密钥。选择所需的API类型，填写信息并生成密钥。

集成高德地图API到微信小程序

在小程序开发工具中，新建一个amap.js文件并输入代码示例，引入API并创建地图实例，再获取天气信息。

// 引入高德地图API
var AMap = require('@antv/l7-maps');

// 创建高德地图实例
var map = new AMap.Map({
  container: 'map',
  center: [116.407408, 39.904228],
  zoom: 11
});

// 获取天气信息
AMap.plugin(['AMap.Weather'], function() {
  var weather = new AMap.Weather();
  weather.getLiveWeather('110101', function(err, data) {
    if (err) {
      console.log(err);
    } else {
      console.log(data);
    }
  });
});

在微信小程序中使用高德地图API

在小程序页面文件中，引入amap.js文件，使用AMap对象创建地图实例，并使用AMap.Weather对象获取天气信息。

代码示例

Page({
  onReady: function () {
    // 创建高德地图实例
    this.map = new AMap.Map({
      container: 'map',
      center: [116.407408, 39.904228],
      zoom: 11
    });

    // 获取天气信息
    AMap.plugin(['AMap.Weather'], function() {
      var weather = new AMap.Weather();
      weather.getLiveWeather('110101', function(err, data) {
        if (err) {
          console.log(err);
        } else {
          console.log(data);
        }
      });
    });
  }
});