登录注册

访问 高德开放平台控制台 ，点击右上角进行注册，按照流程注册即可。如果注册过了，请进行登录，这里我已经注册过了，就直接用支付宝扫码登录了。

控制台
控制台

创建新应用

应用名称按照需求填写，应用类型选择为天气，点击确认创建。

创建新应用
创建新应用

添加Key

Key名称按照提示规范进行填写，服务平台选择 Web端(JS API)，并打勾阅读并同意，点击提交添加。

添加Key
添加Key

提交后会生成Key和安全密钥，供访问高德地图API使用。

生成Key
生成Key

创建vue项目

如果你不会搭建vue项目，那么你可以看看我的这篇文章， 手把手教你搭建vue项目 ，如果你已经掌握如何搭建 vue项目，那么你可以跳过本步骤。

安装依赖

        

          
            
            bash
          
          
        

        

          
1

          npm i @amap/amap-jsapi-loader --save

通过执行上述命令，安装依赖。

使用高德地图API

打开我们通过cli脚手架创建的vue项目。

在你编写的vue组件中引入高德地图API，并编写初始化 initMap方法，在onMounted钩子中调用。

        

          
            
            JavaScript
          
          
        

        

          
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126

          import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'App',
  data() {
    return {
      map: null,
      center: [116.397428, 39.90923],
      marker: null
    }
  },
  methods: {
    initMap() {
      window._AMapSecurityConfig = {
        // securityJsCode: "「你申请的安全密钥」",
      };
      AMapLoader.load({
        key: '申请好的Web端开发者Key', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          'AMap.Geolocation',
          "AMap.Marker",
          'AMap.Geocoder',
          'AMap.CitySearch',
          'AMap.Weather',
          "AMap.InfoWindow"
        ]
      })
      .then(AMap => {
        this.map = new AMap.Map('map', {
          //设置地图容器id
          resizeEnable: true,
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: this.center //初始化地图中心点位置
        })

        this.getGeolocation(AMap);

        this.getCitySearch(AMap);
      })
      .catch(e => {
        console.log(e, 'e');
      })
    },
    // 通过浏览器获取经纬度
    getGeolocation(AMap) {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认：true
        timeout: 10000, // 设置定位超时时间，默认：无穷大
        offset: [10, 20],  // 定位按钮的停靠位置的偏移量
        zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        position: 'RB' //  定位按钮的排放位置,  RB表示右下
      })

      // 设置当前位置
      geolocation.getCurrentPosition((status,result) => {
        if(status=='complete'){
          this.map.setCenter(result.position);
          this.marker = new AMap.Marker({
            position: result.position,
            map: this.map
          });
        }
      });
    },

    // 城市查询
    getCitySearch(AMap) {
      const citySearch = new AMap.CitySearch();
      citySearch.getLocalCity((status, result) => {
        if (status === "complete" && result.info === "OK") {
          // 查询成功，result即为当前所在城市信息
          this.getWeather(AMap, result.city);
        }
      });
    },

    // 获取天气信息
    getWeather(AMap, city) {
      const weather = new AMap.Weather();
      //执行实时天气信息查询
      weather.getLive(city, (err, data) => {
        console.log(err, data);
        //err 正确时返回 null
        //data 返回实时天气数据，返回数据见下表
        const infoWindow = new AMap.InfoWindow({
          anchor: 'top-center',
          content:
            `
            <div class="info-content">
              <div class="info-item">
                城市/区：${data.city}
              </div>
              <div class="info-item">
                天气：${data.weather}
              </div>
              <div class="info-item">
                温度：${data.temperature}"℃
              </div>
              <div class="info-item">
                风向：${data.windDirection}
              </div>
              <div class="info-item">
                风力：${data.windPower}级
              </div>
              <div class="info-item">
                空气湿度：${data.humidity}
              </div>
              <div class="info-item">
                发布时间：${data.reportTime}
              </div>
            </div>
            `,
        });
        this.$nextTick(() => {
          this.marker && this.marker.on('click', () => {
            infoWindow.open(this.map, this.map.getCenter())
          })
        })
      });
    },
  },
  mounted() {
    this.initMap()
  }
}

上述代码中执行步骤如下：

  1. 执行initMap方法，用于初始化地图地图实例，并设置其默认中心点（北京）和缩放级别，并配置插件，插件有定位插件（AMap.Geolocation），标记插件（AMap.Marker），窗口插件（AMap.InfoWindow），城市查询插件（AMap.CitySearch），天气插件（AMap.Weather）
  2. 执行 getGeolocation(AMap)，通过浏览器信息获取地理位置信息，获取成功后，设置中心点区域，并创建Marker标记。
  3. 执行 getCitySearch(AMap)，通过定位信息获取城市信息，获取成功后，通过城市信息查询天气
  4. 获取到天气信息后创建infoWindow，设置内容，并给marker绑定点击事件，点击时弹出infoWindow。
天气
天气