vue封装的百度地图插件

最新推荐文章于 2024-09-10 19:01:04 发布

星繁~

最新推荐文章于 2024-09-10 19:01:04 发布

阅读量537

点赞数 1

分类专栏：前端 # 插件

本文链接：https://blog.csdn.net/m0_38010595/article/details/106098742

版权

前端同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

插件

5 篇文章 0 订阅

订阅专栏

vue封装的百度地图
在这里插入图片描述
使用代码：

// 安装
npm install vue-baidu-map --save
// 全局注册该组件
import BaiduMap from 'vue-baidu-map' // 百度地图插件
Vue.use(BaiduMap, {
  /* 申请的百度密钥，可以在百度地图官网申请 */
  ak: 'DD279b2a90afdf0ae7a3796787a0742e'
})
// 在组件中具体使用
<baidu-map :center="{lng:117.181753,lat:36.676514}" :zoom="13" :scroll-wheel-zoom="true" class="map">
          <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT" />
          <bm-marker :position="{lng:117.181753,lat:36.676514}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            <bm-label :label-style="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" content="富友慧明" />
          </bm-marker>
          <bm-overview-map :is-open="true" anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
        </baidu-map>

**注意：**在IE中使用该组件会报错，
Error in created hook: “ReferenceError: “Promise”未定义”
解决方法：
1.首先下载安装 babel-polyfill 依赖： npm install --save babel-polyfill
2.项目main.js 入口文件引入： import ‘babel-polyfill’
错误分析：
就是ie 内核的报错,首先定位浏览器兼容问题，然后看报错：Error in created hook: “ReferenceError: “Promise”未定义”，也就是说promise 回调不支持，promise 是es6 的特性,也就是说ie 内核版本对 es6 兼容不友好，需要降级才能解析
而Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码