vue-offline-baidu-map
Version:
Baidu Map Component for Vue 2.0
53 lines (46 loc) • 1.18 kB
Markdown
### 安装
```
npm i --save vue—offline-baidu-map
```
把offinemap放到服务器托管
### 初始化
##### 全局引入
```javascript
import Vue from 'vue'
import BaiduMap from 'vue-offline-baidu-map'
//mapUrl为map.js路径
Vue.use(BaiduMap, {
mapUrl: 'YOUR_MAPURL'
})
```
###### 局部引入
<baidu-map class="map" :mapUrl="YOUR_MAPURL">
### 使用
##### 瓦片地图使用
```vue
<template>
<baidu-map class="map" :map-style="{style:'black'}" >
<!--:map-style="{style:'black'}" style为图片风格文件夹名 -->
</baidu-map>
</template>
```
##### 矢量地图
```vue
<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>
```
##### 样式
```vue
<style>
/* 地图容器必须设置宽和高属性 */
.map {
width: 400px;
height: 300px;
}
</style>
```
## 组件使用
参考vue-baidu-map文档