Use vue3 to use Baidu map to achieve positioning and obtain weather conditions

The process is as follows:

1. Install Baidu map

First add to the body tag of the index.html file on the root directory (or in the public)

<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>

When using let myCity = new BMap.LocalCity(); an error was reported, BMap could not be found, and I also tried what was said on the Internet

let myCity = new window.BMap.LocalCity() still doesn't work; but I found a solution on the Internet,

const BMap = (window as any).BMapGL;

That's it,

Then, create a new bmap.js file, put the following content, and introduce it in the page you want to use,

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. Combining with the browser to obtain the location of your city

3. Obtain the city ID through the location

4. Obtain the weather conditions of the city through the city ID (these three steps are all implemented on one page, so the code is directly uploaded)

<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>

The location information is printed out like this