使用vue3使用百度地图实现定位并获取天气状况-创新互联

流程如下：

1、安装百度地图

先在根目录上（或者public中）的index.html文件的body标签中加入

在使用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获取城市天气状况（这三个步骤都在一个页面实现的，所以就直接上代码了）

位置信息打印出来是这样的

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧