Use vue3 para usar el mapa de Baidu para lograr el posicionamiento y obtener las condiciones climáticas

El proceso es el siguiente:

1. Instalar el mapa de Baidu

Primero agregue a la etiqueta del cuerpo del archivo index.html en el directorio raíz (o en el público)

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

Al usar let myCity = new BMap.LocalCity(); se informó un error, no se pudo encontrar BMap, y también probé lo que se dijo en Internet

let myCity = new window.BMap.LocalCity() todavía no funciona, pero encontré una solución en Internet,

const BMap = (window as any).BMapGL;

Eso es todo,

Luego, cree un nuevo archivo bmap.js, coloque el siguiente contenido e introdúzcalo en la página que desea usar,

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. Combinando con el navegador para obtener la ubicación de tu ciudad

3. Obtenga la identificación de la ciudad a través de la ubicación

4. Obtenga las condiciones climáticas de la ciudad a través de la identificación de la ciudad (estos tres pasos se implementan en una sola página, por lo que el código se carga directamente)

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

La información de ubicación se imprime así