vue 3 引入百度地图api

最近项目要用到百度地图api，好久没用到地图，就百度了一番，但是找了好几篇文章，发现都没办法成功实现，现将方法记录如下，希望后来者少走弯路，代码如下

<!-- vue 3 引入百度api -->
<template><div id="allmap"></div>
</template><script>
import { defineComponent, onMounted } from "vue";
export default defineComponent({setup() {onMounted(() => {loadMapScript(); // 加载百度地图资源});// 初始化地图const init = () => {let Bmap = window.BMap; // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）var map = new Bmap.Map("allmap"); // allmap必须和dom上的id一直map.centerAndZoom(new Bmap.Point(104.04263635868074, 30.556100647961866),11); // 初始化地图,设置中心点坐标和地图级别map.setCurrentCity("成都");map.enableScrollWheelZoom(true);};const loadMapScript = () => {// 此处在所需页面引入资源就是，不用再public/index.html中引入var script = document.createElement("script");script.type = "text/javascript";script.className = "loadmap"; // 给script一个类名script.src ="https://api.map.baidu.com/getscript?v=3.0&ak=你的ak";// 此处需要注意：申请ak时，一定要应用类别一定要选浏览器端，不能选服务端，不然地图会报ak无效script.onload = () => {// 使用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]);}}document.body.appendChild(script);};},
});
</script>
<style lang='less' scoped>
#allmap {// 注意给dom宽高，不然地图不出来width: 100%;height: 100%;
}
</style>

只要贴这个页面就能出来地图，其他不需要额外配置，效果如下

如果有误，欢迎指正，相互学习，共同进步！！！原创文章，转载请注明出处

vue 3 引入百度地图api相关推荐

vue异步引入百度地图API
看了下官网上的方法,是采用原生的写法,不适用于vue 异步引入的好处是baiduAK可以方便管理 import { baiduAk } from '@/settings'export function ...
vue3引入百度地图API组件的办法：
第一种全局引入 VueCli3引入百度地图Api详细步骤+宽高自动页面自适应(踩坑+源代码)_BBBling的博客-CSDN博客第二种组件化引入: 第一步安装百度地图依赖包 npm i vue ...
在vue中使用百度地图API：区域显示3D棱柱、地点标注、信息提示
文章目录 1.在vue中引入百度地图的script 2.生成想要的地图样式 3.生成地图 4.创建3d棱柱 5.设置标记点和提示框 6.代码总结 1.在vue中引入百度地图的script 在publi ...
Vue项目使用百度地图api
目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证进入百度地图开放平台官网,(认证需要身份证号码,人脸识别,手机百度APP,邮箱地址) 注册登录完 ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
【vue+百度地图】vue项目使用百度地图API（普通展示）
方法来自大神[超华] 1.进入百度API 操作官网:https://lbsyun.baidu.com 根据官网流程: 登录自己的百度账号-> 申请然后点击邮箱内获取的新链接-> 填写自己需 ...
vue 项目中百度地图 API 使用流程
文章目录一.在百度地图开放平台注册账号并登录.认证二.创建 ak 三.项目使用四.丰富的功能一.在百度地图开放平台注册账号并登录.认证 1.网址:http://lbsyun.baidu.com ...
vue -web引入百度地图
本篇文章是笔者记录:从零到实现的全部过程先看效果图,是否是你想要的效果,两张不同缩放得到的效果图,目录有最终的效果图要想实现如图所示,必须满足以下几个条件: 是否已有百度地图的api的ak密钥: ...
vue中调用百度地图api
最近呢,由于工作需要,自己搭一个简单的h5应用给公司的客户,方便预约来访时间,然后写了小半年react-native的我,终于能写web了-(题外话题外话),然后我就欣然拿起久未使用的vue(好吧,还 ...
vue项目调用百度地图api 学习总结
一.安装百度地图插件: npm install vue-baidu-map –save 二.在vue项目首页index.html进入插件: 注:src里的http必须要写如果不写会出现bug! ! ! ...

vue 3 引入百度地图api

vue 3 引入百度地图api相关推荐

最新文章

热门文章