百度网做网站吗,前端做网站步骤,天津 公司网站建设,湖州建设局新网站本次也是正好写了一个基于VUE3和百度地图的设计#xff0c;但奈何第一次使用百度地图#xff0c;在学习的途中遇到了很多问题#xff0c;也发现网上的材料相对较少#xff0c;因此做出了一些小总结#xff0c;后续还会更新。 一、直接引入
直接在public中的index.html中进… 本次也是正好写了一个基于VUE3和百度地图的设计但奈何第一次使用百度地图在学习的途中遇到了很多问题也发现网上的材料相对较少因此做出了一些小总结后续还会更新。 一、直接引入
直接在public中的index.html中进行引入 在body后或html后都可以的相信也不用多说(引入记得修改ak秘钥还有版本问题)
script typetext/javascript src//api.map.baidu.com/api?v3.0ak您的密钥
二、在vue组件内部JS实现引入(可直接使用初始化部分和ak秘钥自行修改即可)
script setup
onMounted(() {// 加载百度地图资源loadMapScript();
});
function loadMapScript() {// 创建DOM元素修改类型var script document.createElement(script);script.type text/javascript;script.className loadmap;script.src https://api.map.baidu.com/getscript?v3.0ak你的ak;// 待资源加载完成再初始化地图script.onload () {init();};// 添加类名let loadmap document.getElementsByClassName(loadmap);// 去重if (loadmap) {// 每次append script之前判断一下避免重复添加script资源标签for (var i 0; i loadmap.length; i) {document.body.removeChild(loadmap[i]);}}// 添加到body里document.body.appendChild(script);
}// 初始化地图部分
function init() {}
/script
三、编写js文件引用文件使用
这个就需要再项目中自行创建一个js文件了这里我命名为bmp.js了我是存在了src的assets中。
这里返回的是一个Promise对象因此当我们使用then方法链式调用即可。 // bmp.js
export function BMPGL(ak) {return new Promise(function (resolve, reject) {window.init function () {// eslint-disable-next-lineresolve(BMapGL)}const script document.createElement(script)script.type text/javascriptscript.src http://api.map.baidu.com/api?v1.0typewebglak${ak}callbackinitscript.onerror rejectdocument.head.appendChild(script)})
}
// 引用
BMAP(你的ak秘钥).then(resolve {// 初始化地图等处理
})
