#登录注册

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

#创建新应用

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

#添加Key

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

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

#创建vue项目

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

#安装依赖

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

        

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

#使用高德地图API

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

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

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
          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。