UNPKG

vue-offline-baidu-map

Version:

Baidu Map Component for Vue 2.0

53 lines (46 loc) 1.18 kB
### 安装 ``` 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文档