1.登录高德开放平台,点击创建新应用,输入应用名称,选择应用类型,然后点击创建
2.点击添加key,按照以下步骤:
3.然后提交后点开就能看到你的key
4.以下就是示例代码:
<!-- 高德获取天气坐标 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="weather-info"></div>
</body>
<script>let xhr = new XMLHttpRequest();// 发送请求
// city=后面写你自己的地区的坐标编码,key=后面写你自己的
xhr.open("GET", "https://restapi.amap.com/v3/weather/weatherInfo?city=410100&key=放你的key");
xhr.onload = function () {// if (xhr.readyState === 4 && xhr.status === 200) {let tianqi = JSON.parse(xhr.responseText);const liveWeather = tianqi.lives[0];console.log(tianqi);const a = document.getElementById('weather-info');a.innerHTML = `<h2>${liveWeather.province} ${liveWeather.city}</h2><p>${liveWeather.weather}</p><p>${liveWeather.temperature}°C</p><p>${liveWeather.winddirection}</p><p>${liveWeather.windpower}</p><p>${liveWeather.humidity}%</p><p>${liveWeather.reporttime}</p>`;// }
};
// xhr.onerror = function () {
// console.log(xhr.status, xhr.statusText);
// document.getElementById('weather-info').innerHTML = 'Failed to load weather information.';
// };
xhr.send();
</script>
</html>