关于Vue 3.0引入百度地图不兼容的解决办法

目录
  • 关于Vue 3.0引入百度地图 不兼容的解决办法
  • 1. 问题：Vue 3.0引入百度地图 不兼容
  • 2. 解决办法
  • 3.vue页面 引入并执行
  • 4.完成， 地图如下

关于Vue 3.0引入百度地图 不兼容的解决办法

1. 问题：Vue 3.0引入百度地图 不兼容

百度地图开发平台文档 封装的vue版本暂时还没有 到 vue 3.0

如果 用npm 引入并使用的话，会出现报错

at eval (bindEvent.js?4fab:8) at Array.forEach (<anonymous>) at Proxy.eval (....

（现在暂时是 BaiduMapVue2.x版本,如下图）

2. 解决办法

小编在 各博客搜集 办法并结合，如下（小编是用cdn 引入js 用百度地图原生api 来编写的）

新建 js 文件 (异步创建script标签 引入百度地图api)

export function baiduMap(ak) {
  return new Promise(function(resolve, reject) {
    window.baiduMap = function() {
      resolve()
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=baiduMap`
    script.onerror = reject
    document.head.appendChild(script)
  })
}

配置“vue.congfig.js” (我们映入了CDN就不要再打包这个模块了，所以通过 externals 来排除这个模块) 如下：

 externals: { "BMap": "BMap" }

3.vue页面 引入并执行

生成密匙： ak密匙(百度地图传送门)

 <template>
	<div id="map"></div>
</template>

<style type="text/css">
	#map {
		width: 100%;
		height: 500px;
	}
</style>

<script>
	import { baiduMap } from '../../baiduMap.js'
	export default {
		data() {
			return {
				ak: '你的百度地图密匙' // 百度密匙
			}
		},
		mounted() {
			// 动态引入较大类库避免影响页面展示
			this.$nextTick(() => {
				let _this = this;
				baiduMap(_this.ak).then( thatMap => {
				  // 创建地图实例
					var map = new BMap.Map("map");
					// 创建地图实例
					var point = new BMap.Point(116.404, 39.915);
					// 创建点坐标
					map.centerAndZoom(point, 15);
					// 初始化地图，设置中心点坐标和地图级别
				})
			})
		}
	}
</script>

4.完成， 地图如下

到此这篇关于关于Vue 3.0引入百度地图 不兼容的解决办法的文章就介绍到这了,更多相关Vue 3.0引入百度地图 不兼容内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue整合百度地图显示指定地点信息

    vue整合百度地图显示指定地点信息

    目录 一.安装相关依赖 二.在main.js中引用 三.创建地图工具 map.js 四.绘制地图 先看看效果图 一.安装相关依赖 npm i --save vue-baidu-map 二.在main.js中引用 import BaiduMap from "vue-baidu-map" Vue.use(BaiduMap,{   ak: '你的密钥(百度地图开放API官网可免费申请)' }) 三.创建地图工具 map.js export function MP(ak) {       re

  • vue全局接入百度地图的实现示例

    vue全局接入百度地图的实现示例

    目录 前言 一.获取ak密钥 二.整合步骤 总结 前言 本文主要教大家如何把百度地图整合到我们的vue项目中 一.获取ak密钥 1.登录网址 https://lbsyun.baidu.com/ 注册百度地图开放平台账号,填写认证信息,并且创建应用 创建完应用后可以在类似界面获取到我们的AK密钥 注意:IP白名单要合理配置 我这里为了方便测试才设置的0.0.0.0/0 二.整合步骤 获取到ak密钥之后就可以与我们的VUE项目进行整合 1.npm下载包 代码如下(示例): npm install -

  • vue3.0引入百度地图并标记点的实现代码

    vue3.0引入百度地图并标记点的实现代码

    首先新建一个js,主要用来引入百度地图的js,代码如下: export function baiduMap() { return new Promise(function(resolve, reject) { window.baiduMap = function() { resolve() } var script2 = document.createElement('script') script2.type = 'text/javascript' script2.src = `http://

  • Vue使用百度地图实现城市定位

    Vue使用百度地图实现城市定位

    本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下 Vue项目运行环境:Vue 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在 控制台---->应用管理---->我的应用 下面创建一个应用. 目的是获取 ak 步骤二:在public文件夹的index.html文件中 导入百度地图,拼上你的ak 步骤三:在项目的根目录中创建vue.config.js文件 如果有vue.config.js文件的话,直接添加以下代码即可. vue.config

  • 关于Vue 3.0引入百度地图不兼容的解决办法

    关于Vue 3.0引入百度地图不兼容的解决办法

    目录 关于Vue 3.0引入百度地图 不兼容的解决办法 1. 问题:Vue 3.0引入百度地图 不兼容 2. 解决办法 3.vue页面 引入并执行 4.完成, 地图如下 关于Vue 3.0引入百度地图 不兼容的解决办法 1. 问题:Vue 3.0引入百度地图 不兼容 百度地图开发平台文档 封装的vue版本暂时还没有 到 vue 3.0 如果 用npm 引入并使用的话,会出现报错 at eval (bindEvent.js?4fab:8) at Array.forEach (<anonymous>

  • 详解vue.js下引入百度地图jsApi的两种方法

    前言 今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • 如何在vue项目中使用百度地图API

    如何在vue项目中使用百度地图API

    目录 1.在百度地图开放平台注册账号并登录 2.选择自己所需的地图版本: 3.在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈) 4.之后就可以随处使用我们的百度地图了: 5.标记点的添加并拥有点击弹窗效果: 6.为坐标点添加文本标记: 1.在百度地图开放平台注册账号并登录 网址:http://lbsyun.baidu.com/index.php?title=jspopularGL 2.选择自己所需的地图版本: 我个人使用2.0

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

  • vue项目中使用百度地图的方法

    vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • vue中echarts引入中国地图的案例

    如下所示: <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeM

  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    vue点击弹窗自动触发点击事件的解决办法(模拟场景)

    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化. div 指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } }, PS:下面看下vue 自动触发点击事件 需要,点击左边的列表出详情,但是都需要点击事件,页面进来时,默认触发点击事件 方法一,vue自定义指令 direc

  • 2种在vue项目中使用百度地图的简单方法

    地图在项目中用得很多,最近也用了几次,好长时间不用都记不清了,闲暇时整理了vue里使用百度地图的2种方法,方便自己查看,也分享给大家,希望可以帮助有需要的人. 普遍的方法是: 1.index.html 中引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 2.新建个组件maps 注意 :不要把组件命名为

随机推荐