使用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元起,快前往官网查看详情吧


本文标题:使用vue3使用百度地图实现定位并获取天气状况-创新互联
网址分享:http://scyanting.com/article/dceodo.html