vue异步引入百度地图API

看了下官网上的方法，是采用原生的写法，不适用于vue

异步引入的好处是baiduAK可以方便管理

import { baiduAk } from '@/settings'export function map() {/* eslint-disable */return new Promise(function(resolve, reject) {if (typeof (BMap) !== 'undefined') return resolve(BMap)var script = document.createElement('script')script.type = 'text/javascript'script.src = `http://api.map.baidu.com/api?v=2.0&ak=${baiduAk}&callback=init`script.onerror = rejectdocument.head.appendChild(script)const timer = setInterval(() => {if (BMap) {resolve(BMap)clearInterval(timer)}}, 500)})
}

此代码特殊在于使用了定时器循环resolve(BMap)，因异步原因，有时无法正常返回BMap，故采用此写法

引入方式

import { map } from '@/utils/map'

使用方式

            this.$nextTick(() => {map().then(BMap => {this.map = new BMap.Map('allmap', { enableMapClick: false })const point = new BMap.Point(longitude, latitude)this.map.centerAndZoom(point, 17)this.map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用this.map.enableContinuousZoom() // 启用地图惯性拖拽，默认禁用})})

vue异步引入百度地图API相关推荐

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异步引入百度地图API

vue异步引入百度地图API相关推荐

最新文章

热门文章