vue3项目引入高德地图 JS API（vue-amap不支持vue3）

本来打算使用vue-amap实现获取天气功能的，奈何不支持vue3，于是还是决定用高德原生api实现吧，其中遇到一些坑记录一下使用流程。

在Vue 3项目中引入高德地图JS API并获取天气信息，需要按照以下步骤进行操作：

1. 注册高德地图开发者账号并获取API Key：

   首先，你需要注册一个高德地图开发者账号，然后在控制台中创建一个应用，并获取API Key。这个API Key将用于在你的Vue项目中访问高德地图的天气API。

2. 在Vue项目中安装高德地图JS API：

   使用npm或者yarn，在Vue项目中安装高德地图JS API。可以使用以下命令：

   npm install @amap/amap-jsapi-loader

   或者

yarn add @amap/amap-jsapi-loader

3. 在Vue组件中引入并使用高德地图天气API：

   在你想要获取天气信息的Vue组件中，引入并使用高德地图的JS API。首先，确保你在组件的`<script>`标签中导入所需的模块：

   import AMapLoader from '@amap/amap-jsapi-loader';

设置key值（这里需要注意，不止需要设置高德的key，还需要设置这个securityJsCode）不设置会

报INVALID_USER_DOMAIN错误

window._AMapSecurityConfig = {

  securityJsCode: '你的securityJsCode',

}

​ 

4.获取天气代码 

 AMapLoader.load({
    key: '你的key',
    version: '2.0',
  })
    .then((AMap) => {
      console.log('AMap :>> ', AMap);
      // 创建天气查询实例
      AMap.plugin('AMap.Weather', () => {
        const weather = new AMap.Weather();

        // 获取当前城市的天气信息
        weather.getForecast('北京市', (error, result) => {
          if (error) {
            console.error('Failed to get weather data:', error);
          } else {
            weatherInfo.value = result;
            console.log('  weatherInfo.value  :>> ',   weatherInfo.value );
          }
        });
      });
    })
    .catch((error) => {
      console.error('Failed to load AMap:', error);
    });

5.进阶，使用navigator.geolocation.getCurrentPosition根据当前位置坐标获取天气

navigator.geolocation.getCurrentPosition((res) => {
      const latitude = res.coords.latitude;
      const longitude = res.coords.longitude;
      const lnglat = [longitude, latitude];
      console.log('lnglat :>> ', lnglat);
      // 根据经纬度获取地理位置信息
      AMapLoader.load({
        key: '8a4f9300bde1bb3864c35adc3ab6681b',
        version: '2.0',
      })
        .then((AMap) => {
          // 使用AMap对象
          AMap.plugin('AMap.Geocoder', () => {
            const geocoder = new AMap.Geocoder();
            geocoder.getAddress(lnglat, (status, result) => {
              if (status === 'complete' && result.info === 'OK') {
                const adcode = result.regeocode.addressComponent.adcode;
                // 使用adcode获取天气信息
                AMap.plugin('AMap.Weather', () => {
                  const weather = new AMap.Weather();
                  weather.getLive(adcode, (err, data) => {
                    if (!err) {
                      cptInfo.value.report_prop.weather = data.weather;
                      console.log('   cptInfo.value.report_prop.weather :>> ', cptInfo.value.report_prop.weather);
                    } else {
                      console.error('Failed to get weather data:', err);
                    }
                  });
                });
              }
            });
          });
        })
        .catch((error) => {
          console.error('Failed to load AMap:', error);
        });
    });