1. zfbmap

zfbmap

安装

npm i --save zfbmap

初始化

全局注册引入
 // main.js中引入,全局注册
import Vue from 'vue'
import BaiduMap from 'zfbmap'
//mapUrl为map.js路径
Vue.use(BaiduMap, {
  mapUrl: 'YOUR_MAPURL'
})
按需加载引入
 import BaiduMap from 'zfbMap/components/map/Map.vue
export default{
  name:'',
  components:{BaiduMap}
}
// 按需求引入所需要的组件,并在组件中注册

使用

瓦片地图使用
<template>
  <baidu-map class="map"
    :center="{lng: 116.404, lat: 39.915}"
    :map-style="{style:'black'}"
    :zoom="14"
    @mousemove=""
    @click=""
    @rightclick="">
  </baidu-map>
  <!--:map-style="{style:'black'}" style为图片风格文件夹名 
      :center  地图中心经纬度
      :zoom  地图放大级数
      mousemove 鼠标移动
      click  点击
      rightclick 右击
  -->
</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>

Dependencies