cx_maps v1.0.18

简介

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

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

开发文档

百度地图官方文档

谷歌地图官方文档

相关依赖包

安装

• 切换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)

相关方法