vue PC项目使用高德API 获取位置和天气信息

最新推荐文章于 2025-10-18 17:14:45 发布

原创最新推荐文章于 2025-10-18 17:14:45 发布 · 2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端开发问题记录专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue PC项目中结合高德API获取当前位置及天气信息的步骤。首先，你需要在高德地图注册成为开发者并创建web应用获取key和安全秘钥。然后，在项目的index.html中引入相关脚本。接着，在需要获取位置信息的页面中调用citySearch和weather插件来实现定位和天气查询。查询到的天气信息可以存储在本地缓存，以备其他页面使用。最后，文章提供了获取天气信息的代码示例。

问题描述

vue PC项目使用高德API 获取位置和天气信息

解决方案：

1.在高德地图上申请一个开发者，并且创建一个key 选择web端应用

在这里插入图片描述

2.在vue项目中的index.html中使用script标签引入生成的key和秘钥

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>你的项目名称</title>
</head>

<body>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode:'你申请的安全秘钥',
    }
  </script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

3.在需要获取位置的页面中定义方法使用citySearch和weather插件
4.可将获取到的天气信息保存至本地缓存再其他页面拉取渲染，注意要JSON.stringify 转化为JSON字符串，拉取的时候再用JSON.parse将JSON字符串转化为对象

  getLngLatLocation() {
      let that = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            console.log("通过ip获取当前城市:", result);
            AMap.plugin("AMap.Weather", function () {
              //创建天气查询实例
              var weather = new AMap.Weather();
              //执行实时天气信息查询
              weather.getLive(result.city, function (err, data) {
                console.log("天气", data);
                if (data) {
                  that.weather = data.weather;
                  that.temperature = data.temperature;
                  that.city = data.city;
                  let weatherObj = {
                    weather: data.weather,
                    temperature: data.temperature,
                    city: data.city,
                  };
                  localStorage.setItem(
                    "WEATHER_INFO",
                    JSON.stringify(weatherObj)
                  );
                }else{
                  console.log(err);
                }
              });
            });
          }
        });
      });
    },