vue3 を使用して Baidu マップを使用して位置を取得し、気象条件を取得します

プロセスは次のとおりです。

1.百度地図をインストールする

まず、ルート ディレクトリ (またはパブリック) にあるindex.html ファイルの body タグに追加します。

<script  src="https://api.map.baidu.com/api?v=3.0&ak=你在百度地图申请的Ak"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.3&key=你申请的key"></script>

let myCity = new BMap.LocalCity(); を使用すると、エラーが報告され、BMap が見つかりませんでした。インターネットで言われていることも試しました。

let myCity = new window.BMap.LocalCity() はまだ機能しませんが、インターネットで解決策を見つけました。

const BMap = (window as any).BMapGL;

それでおしまい、

次に、新しい bmap.js ファイルを作成し、次の内容を配置して、使用するページに導入します。

export default {
  init: function () {
    const AK = "5ieMMexWmzB9jivTq6oCRX9j&callback"; //AK
    const BMap_URL =
      "https://api.map.baidu.com/api?v=2.0&ak=" +
      AK +
      "&s=1&callback=onBMapCallback";
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (typeof BMap !== "undefined") {
        resolve(BMap);
        return true;
      }
      // 百度地图异步加载回调处理
      window.onBMapCallback = function () {
        resolve(BMap);
      };

      // 插入script脚本
      let scriptNode = document.createElement("script");
      // scriptNode.setAttribute(type, 'text/javascript');
      scriptNode.setAttribute("src", BMap_URL);
      document.body.appendChild(scriptNode);
    });
  },
};

2. ブラウザと組み合わせてあなたの都市の位置を取得する

3. 場所から都市 ID を取得します。

4. 都市 ID を通じて都市の気象状況を取得します (これら 3 つのステップはすべて 1 ページに実装されているため、コードは直接アップロードされます)

<script lang="ts">
import myBMap from "./bmap.js"; // 引入刚才创建的bmap.js文件
import axios from "axios";
import { defineComponent, ref, onMounted } from "vue";

export default defineComponent({
  setup() {
    let weather = ref(""); // 天气
    let temperature = ref(""); // 温度

   // 结合浏览器获取城市位置(我只需要获取省和市,具体看个人需求)
    const getCity = () => {
      const BMap = (window as any).BMapGL;
      myBMap.init().then((BMap) => {
        let myCity = new BMap.LocalCity();
        myCity.get(
          (result) => {
            let geoc = new BMap.Geocoder();
            geoc.getLocation(result.center, (res) => {
              // 位置信息
              console.log("位置", res.addressComponents);
     

              getLocationId(
                res.addressComponents.province,
                res.addressComponents.city
              );
            });
          },
          { enableHighAccuracy: true }
        );
      });
    };

    // 获取城市id
    const getLocationId = (province, city) => {
      axios({
        method: "get",
        url:
          "https://geoapi.qweather.com/v2/city/lookup?key=56a14978f76747a8897384f7bef56c20&adm=" +
          province +
          "&location=" +
          city,
      }).then((res) => {
        getWeather(res.data.location[0].id);
      });
    };

    // 获取天气
    const getWeather = (id) => {
      axios({
        method: "get",
        url:
          "https://devapi.qweather.com/v7/weather/now?key=56a14978f76747a8897384f7bef56c20&location=" +
          id,
      }).then((res) => {
        temperature.value = res.data.now.temp;
        weather.value = res.data.now.text;
      });
    };


    onMounted(() => {
      getCity(); // 获取城市
    });
     
    return {
      
      getWeather,
      getLocationId,
      getCity,
      weather,
      temperature,
    };
  },
});
</script>

こんな感じで位置情報が出力されます