cx_maps

车晓地图插件

简介

该插件针对 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：多段线数据数组	是	否