简介

该插件针对 Vue2 版本开发，通过mixins混入使用，封装百度地图、谷歌地图公用方法，暴露方法统一接口，利于后期项目内复用

基于百度地图V2.0版本，谷歌地图V3.5.x版本开发

开发文档

百度地图官方文档

谷歌地图官方文档

相关依赖包

|百度|| |--|--| |bmaplib.distancetool|百度测距插件|

|谷歌|| |--|--| |@googlemaps/js-api-loader|加载谷歌地图npm包|

安装

• 切换npm源

车晓内部私有源地址：http://npm.chexiao.co/

  npm config set registry http://npm.chexiao.co/
  // 切换后查看一下当前源地址
  npm config get registry
  // 登录账号，具体账号密码，请查看群内容
  npm login

建议：

1. 安装nrm工具管理npm源，
2. Node版本10以上，最新版本最佳

• 安装cx_maps包

  npm i cx_maps -S

使用

注意事项

• 模板文件index.html需要先引入以下脚本

<script src="https://api.map.baidu.com/getscript?v=2.0&ak=6aeglsKLZQiDkeL8H1SlEiXT5hrSjNoF&s=1"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

• 谷歌地图需要配合翻墙软件进行开发

• 经纬度区分

  // 百度地图经纬度
  const position = {
    lng: data.lng,
    lat: data.lat
  }
  // 谷歌地图经纬度
  const position = {
    lng: data.gps84Lon,
    lat: data.gps84Lat
  }

组件内使用

• 引入包

  import mapMixin from 'cx_maps'

• 通过mixins混入组件

  ...
  mixins: [ mapMixin ],
  ...

• 添加地图挂载点，并进行地图初始化

  <!-- 挂载点必须设置id属性 allMap ref属性 map -->
  <div id="allMap" ref="map"></div>

  mounted() {
    this.mapInitFn()
  }

示例

初始化地图

传出初始化配置项，返回Promise，可以添加地图加载完毕事件回调

this.mapInitFn({
  mapType: 'baidu', // 地图类型 String 'google' 'baidu'
  mapContainer: 'allMap', // 地图挂载点 id 属性 String
  mapTypeControlPosition: 'right', // 地图控件位置 String 'left' 'right'
  lng: 116.404, // 初始化地图经度，国内项目定位到首都，必填项
  lat: 39.915,  // 初始化地图纬度，国内项目定位到首都，必填项
}).then()

切换地图类型

手动切换地图类型

  this.changeMapFn(type) // type 地图类型 String 'google' 'baidu'

调整地图视角

根据当前marker，自动调整地图视角

  this.setViewPort(this.markerArr) // markerArr 数组

显示信息弹窗

通常配合marker点标记，显示信息弹窗

  // 必填参数 信息对象
  // 自定义dom元素挂载点，默认 this.$refs.win.$el
  this.openInfoWindow(information)

添加label弹窗

  /**
   * @description: 添加label弹窗
   * @return {*}
   * @param {*} marker 点标记
   * @param {*} point 经纬度
   * @param {*} dom 弹窗dom元素 默认为ref=msgLabel的元素
   */   
  this.addLabelLayer(marker, point, this.$refs.msgLabel.innerHTML)

相关方法

|方法名|说明|参数|参数是否必填|默认值| |--|--|--|--|--| |mapInitFn|地图初始化方法，返回Promise，传递地图类型，挂载点，地图控件位置，缩放控件位置参数|{ mapType, mapContainer, mapTypeControlPosition, zoomControlPosition,lng,lat }|否（国内项目使用百度地图，定位到首都，必填项mapType，lng，lat，海外项目非必填）|{mapType: 'google', mapContainer: 'allmap', mapTypeControlPosition: 'left', zoomControlPosition: 'right'}| |changeMapFn|切换地图类型|'google'、'baidu'|是|无| |setViewPort|地图根据当前marker显示最佳视角|marker数组|是|无| |openInfoWindow|显示信息弹窗|data 弹窗信息，container自定义弹窗DOM元素|是|container：this.$refs.win.$el| |addMarker|添加marker|data：marker信息对象，customIcon：自定义icon（有默认值），markerFn：是否拥有点击事件|是|customIcon: markerIconArr[data.deviceState - 1]，markerFn: true| |removeMarker|移除marker|delMarker|是|无| |clearOver|清除 marker、测距、弹出层、多段线等图层|无|否|无| |addLabelLayer|添加label弹窗|marker，point，dom|是|否| |removeLabelLayer|移除label弹窗|无|否|无| |clearDistance|清除多段线绘制|无|否|无| |clearInfoWindow|清除信息弹窗|无|否|无| |resetCenter|重置地图中心点并设置地图缩放|positionObj，zoom|是|zoom: 15| |resetMap|重置地图，清除地图上所有marker、覆盖层，重置地图|无|否|无| |setAnimation|为当前指定marker添加动画|marker数据对象|是|否| |setPolyline|添加多段线|arrPois：多段线数据数组|是|否|