使用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使用百度地图实现定位并获取天气状况-创新互联
URL链接:http://lswzjz.com/article/dceodo.html