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

 更新时间:2022年08月15日 10:08:02   作者:有大厂梦的XiaoWeng  
这篇文章主要介绍了关于Vue 3.0引入百度地图不兼容的解决办法,本文通过实例代码给大家分享解决方法,需要的朋友可以参考下

关于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引入百度地图 不兼容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解滑动穿透(锁body)终极探索

    详解滑动穿透(锁body)终极探索

    这篇文章主要介绍了滑动穿透(锁body),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 解决vue-cli + webpack 新建项目出错的问题

    解决vue-cli + webpack 新建项目出错的问题

    下面小编就为大家分享一篇解决vue-cli + webpack 新建项目出错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue.js入门教程之绑定class和style样式

    vue.js入门教程之绑定class和style样式

    小编之前介绍了通过vue.js计算属性,不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式,有需要的朋友们可以参考借鉴。
    2016-09-09
  • 深入探讨Vue 3中的组合式函数编程方式

    深入探讨Vue 3中的组合式函数编程方式

    Vue 3中引入了组合式函数编程方式,可以更好地实现代码的复用和可维护性。通过定义可组合的函数,可以将组件的逻辑和状态进行拆分和组合,实现更灵活的代码组织方式。同时,组合式函数也支持响应式数据和生命周期钩子函数,更加贴近Vue开发的实际场景
    2023-05-05
  • vue中多个文件下载实现打包压缩下载示例

    vue中多个文件下载实现打包压缩下载示例

    这篇文章主要为大家介绍了vue中多个文件下载实现打包压缩下载的发发示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue实现购物车的监听

    vue实现购物车的监听

    这篇文章主要为大家详细介绍了利用vue的监听事件实现一个简单购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • 解决vue-cli项目打包出现空白页和路径错误的问题

    解决vue-cli项目打包出现空白页和路径错误的问题

    今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue2.0中click点击当前li实现动态切换class

    vue2.0中click点击当前li实现动态切换class

    本篇文章主要介绍了vue2.0中click点击当前li实现动态切换class ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • axios如何取消重复无用的请求详解

    axios如何取消重复无用的请求详解

    这篇文章主要给大家介绍了关于axios如何取消重复无用的请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用axios具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • 详解vuejs中执行npm run dev出现页面cannot GET/问题

    详解vuejs中执行npm run dev出现页面cannot GET/问题

    这篇文章主要介绍了详解vuejs中执行npm run dev出现页面cannot GET/问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论