【使用高德开放平台API和js的Ajax代码实现定位并获得城市的天气情况和经纬度，检索关键词获得周边信息】

文章目录

使用高德开放平台API和js的Ajax代码实现定位并获得城市的天气情况

使用高德开放平台API和js的Ajax代码实现定位并获得城市的天气情况

1、注册高德开放平台账号，免费获得Web服务API应用key

高德开放平台Web服务API

按照API点击申请KEY

登录后进入应用管理

新建应用（随意起名）

然后添加key提交即可

然后就可以看到你申请的key

2、编写js的Ajax代码，实现请求服务得到定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <script>
    function getLocation() {
      axios
        .get("https://restapi.amap.com/v3/ip", {
          params: {
            key: "e8e0bb95c623fd363f68ca5e3045b5b2",
          },
        })
        .then((data) => {
          console.log(data.data);
          const span = document.getElementById("city");
          span.innerText = data.data.city;
        });
    }
  </script>
  <body>
    <button onclick="getLocation()">定位</button><span id="city">未知</span>
  </body>
</html>

实现效果如下：

点击定位按钮后，得到定位地址

3、根据所获得地址定位获得当前城市的天气情况

根据API可知，只需要key和地址就可以获得给定地址的天气情况

4、编写对应的Ajax代码实现自动得到当前城市天气情况和经纬度或进行搜索给定地址的天气情况和经纬度，检索关键词获得周边信息

实现代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios第三方请求库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
      // 1. 先自动定位城市
      let currentCity = "";
      function autoLocation() {
        axios({
          url: "https://restapi.amap.com/v3/ip",
          method: "GET",
          params: {
            key: "e45ba07980d4a0817d2edeba0de23add",
          },
        }).then((data) => {
          currentCity = data.data.city;
          document.getElementById(
            "city"
          ).innerText = `当前城市: ${currentCity}`;
          // 2. 根据城市查询天气, 获取经纬度坐标
          getWeather(currentCity);
          getGeolocation(currentCity);
        });
      }
      autoLocation();

      // 封装查询天气得函数: 自动定位城市和用户输入城市都需要调用
      function getWeather(city) {
        axios({
          url: "https://restapi.amap.com/v3/weather/weatherInfo",
          method: "GET",
          params: {
            key: "e45ba07980d4a0817d2edeba0de23add",
            city: city,
          },
        }).then((data) => {
          // console.log(data.data.lives[0]);
          // const city = data.data.city;
          document.getElementById(
            "wea"
          ).innerText = `当前城市天气: ${JSON.stringify(data.data.lives[0])}`;
        });
      }

      // 查询按钮点击事件
      function searchCity() {
        const inp = document.getElementById("searchCity");
        if (inp.value) {
          getWeather(inp.value);
          getGeolocation(inp.value);
        } else alert("缺少关键字");
      }

      // 封装获取经纬度坐标得函数
      function getGeolocation(city) {
        axios({
          url: "https://restapi.amap.com/v3/geocode/geo",
          method: "GET",
          params: {
            key: "e45ba07980d4a0817d2edeba0de23add",
            address: city,
          },
        }).then((data) => {
          // console.log(data.data.geocodes[0].location);
          document.getElementById(
            "geo"
          ).innerText = `经纬度坐标: ${data.data.geocodes[0].location}`;
        });
      }

      // 检索周边信息
      function poi() {
        const inp = document.getElementById("poi");
        if (inp.value) {
          axios({
            url: "https://restapi.amap.com/v3/place/text",
            method: "GET",
            params: {
              key: "e45ba07980d4a0817d2edeba0de23add",
              keywords: inp.value,
              city: currentCity,
            },
          }).then((data) => {
            console.log(data.data);
            document.getElementById(
              "pois"
            ).innerText = `周边有: ${data.data.pois[0].address}`;
          });
        } else alert("缺少关键字");
      }
    </script>
  </head>

  <body>
    <div>
      <p id="city">当前城市: 未知</p>
      <input id="searchCity" type="text" placeholder="输入城市" /><button
        onclick="searchCity()"
      >
        查询
      </button>
    </div>
    <p id="wea">当前城市天气: 未知</p>
    <div>
      <p id="geo">经纬度坐标: 位置</p>
      <input id="poi" type="text" placeholder="输入检索关键字" /><button
        onclick="poi()"
      >
        检索周边
      </button>
      <p id="pois">周边有：</p>
    </div>
  </body>
</html>