【高德地图-JS】使用高德地图调用天气接口（安装loader包）

前言：需要在Vue2中下载安装第三方包，具体参考：

【高德地图-JS】Vue2中加载高德地图-优快云博客

最终结果

示例源码

<template>
  <div id="container"></div>
</template>
<script >
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '',//安全密钥
}
export default {
  name: 'map-view',
  data() {
    return {
      map: null,
    }
  },
  mounted() {
    this.initAMap()
  },
  unmounted() {
    this.map?.destroy()
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          })
          AMap.plugin(['AMap.Weather'], function () {
            //创建天气查询实例
            var weather = new AMap.Weather()
            //执行实时天气信息查询
            weather.getLive('杭州市', function (err, data) {
              console.log('天气', data)
            })
          })
        })
        .catch((e) => {
          console.log(e)
        })
    },
  },
}
</script>
<style scoped>
#container {
  width: 100%;
  height: 1080px;
}
</style>

官方参考

天气-服务插件和工具-进阶教程-地图 JS API 2.0|高德地图API (amap.com)