关于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引入百度地图 不兼容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue中el-autocomplete与el-select的异同
本文主要介绍了vue中el-autocomplete与el-select的异同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-05-05vue+elementUI-el-table实现动态显示隐藏列方式
这篇文章主要介绍了vue+elementUI-el-table实现动态显示隐藏列方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01
最新评论