车晓地图插件
## 简介 该插件针对 `Vue2` 版本开发，通过mixins混入使用，封装百度地图、谷歌地图公用方法，暴露方法统一接口，利于后期项目内复用 基于百度地图V2.0版本，谷歌地图V3.5.x版本开发 ## 开发文档 [百度地图官方文档](https://lbsyun.baidu.com/index.php?title=jspopular3.0) [谷歌地图官方文档](https://developers.google.com/maps/documentation/javascript?hl=zh-cn) ## 相关依赖包 |百度|| |--|--| |bmaplib.distancetool|百度测距插件| |谷歌|| |--|--| |@googlemaps/js-api-loader|加载谷歌地图npm包| ## 安装 * 切换npm源 车晓内部私有源地址：http://npm.chexiao.co/ ```javascript npm config set registry http://npm.chexiao.co/ // 切换后查看一下当前源地址 npm config get registry // 登录账号，具体账号密码，请查看群内容 npm login ``` 建议： 1. `安装nrm工具管理npm源`， 2. `Node版本10以上，最新版本最佳` * 安装cx_maps包 ```javascript npm i cx_maps -S ``` ## 使用 ### 注意事项 * 模板文件`index.html`需要先引入以下脚本 ```html ``` * 谷歌地图需要配合翻墙软件进行开发 * 经纬度区分 ```javascript // 百度地图经纬度 const position = { lng: data.lng, lat: data.lat } // 谷歌地图经纬度 const position = { lng: data.gps84Lon, lat: data.gps84Lat } ``` ### 组件内使用 * 引入包 ```javascript import mapMixin from 'cx_maps' ``` * 通过mixins混入组件 ```javascript ... mixins: [ mapMixin ], ... ``` * 添加地图挂载点，并进行地图初始化 ```html ``` ```javascript mounted() { this.mapInitFn() } ``` ## 示例 ### 初始化地图 传出初始化配置项，返回Promise，可以添加地图加载完毕事件回调 ```javascript this.mapInitFn({ mapType: 'baidu', // 地图类型 String 'google' 'baidu' mapContainer: 'allMap', // 地图挂载点 id 属性 String mapTypeControlPosition: 'right', // 地图控件位置 String 'left' 'right' lng: 116.404, // 初始化地图经度，国内项目定位到首都，必填项 lat: 39.915, // 初始化地图纬度，国内项目定位到首都，必填项 }).then() ``` ### 切换地图类型 手动切换地图类型 ```javascript this.changeMapFn(type) // type 地图类型 String 'google' 'baidu' ``` ### 调整地图视角 根据当前marker，自动调整地图视角 ```javascript this.setViewPort(this.markerArr) // markerArr 数组 ``` ### 显示信息弹窗 通常配合marker点标记，显示信息弹窗 ```javascript // 必填参数 信息对象 // 自定义dom元素挂载点，默认 this.$refs.win.$el this.openInfoWindow(information) ``` ### 添加label弹窗 ```javascript /** * @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：多段线数据数组|是|否| --- _Source: https://npm.io/package/cx_maps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._