使用高德地图获取当地的天气温度等数据

最新推荐文章于 2025-11-18 02:55:15 发布

原创最新推荐文章于 2025-11-18 02:55:15 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

这篇博客介绍了如何在Vue.js项目中使用高德地图API获取本地天气和温度数据。首先，需要在高德地图平台创建应用并获取API密钥和key值，然后将这些信息填入Vue项目的index.html文件。接着，在需要获取数据的页面中编写代码，实现从API获取并输出天气数据。

使用高德提供的api接口，获取所在地的温度，天气等数据。

1.通过高德地图创建应用，获取密钥以及key值

(1)登录高德地图后点击创建新应用

（输入要创建的应用名称和选择类型）

(2)点击添加，填写相关的信息，获得赋予的key以及安全密钥等信息

(根据创建的应用类型填写即可)

随后便会得到创建应用的key值以及安全密钥，将获取的值在vue项目中public目录下的index.html页面进行填写

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'「您申请的安全密钥」',
        }
</script>
<script src = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>

随后在你要获取值的页面中输入以下的代码

getLngLatLocation() {
	AMap.plugin("AMap.CitySearch", function () {
		var citySearch = new AMap.CitySearch();
		citySearch.getLocalCity(function (status, result) {
			if (status === "complete" && result.info === "OK") {
				AMap.plugin("AMap.Weather", function () {
				    var weather = new AMap.Weather();
					//执行实时天气信息查询
					weather.getLive(result.city, function (err, data) {
						console.log("天气", data);
					});
				});
			}
		});
	});
}

随后便可在控制台输出相关的内容