安装

npm i --save vue—offline-baidu-map

把offinemap放到服务器托管

初始化

全局引入

import Vue from 'vue'
import BaiduMap from 'vue-offline-baidu-map'
//mapUrl为map.js路径
Vue.use(BaiduMap, {
  mapUrl: 'YOUR_MAPURL'
})

局部引入

使用

瓦片地图使用

<template>
  <baidu-map class="map" :map-style="{style:'black'}" >
  <!--:map-style="{style:'black'}" style为图片风格文件夹名 -->
  </baidu-map>
</template>

矢量地图

<template>
  <baidu-map class="map" :theme=":theme" >
  <!--theme为矢量地图自定义样式，进http://ibsyun.baidu.com/index.php?title=open/custom,拷贝地图样式，进http://www.wmksj.com/map.html页面选择个新华地图V2矢量，点击编辑JSON样式，粘贴样式json文件，点击跟新，右击下载矢量地图，下载样式数据，替换custom/v2/style文件 -->
  </baidu-map>
</template>

样式

<style>
/* 地图容器必须设置宽和高属性 */
.map {
  width: 400px;
  height: 300px;
}
</style>

组件使用

参考vue-baidu-map文档