百度地图使用及点聚合功能
由于后台固定了百度地图，百度地图和高德地图经纬度转换有次数限制，不能满足项目的正常运行，所以切换了百度地图，下面对使用中遇到的问题进行记录：
安装及使用百度地图：
npm install vue-baidu-map --save
在main.js中引入
import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: ''// 在百度地图申请的key})
在界面中引用
<baidu-mapid="map":center="center":zoom="zoom"@ready="handler"/>
在data中定义center和zoom，分别是地图的中心点和’层级深度’
center: { lng: 0, lat: 0 }zoom: 3
ready事件中可以取到BMap类和map，从而对地图进行控制
handler({ BMap, map }) {this.BMap = BMapthis.map = mapmap.setMapStyleV2({styleId: ''//设置自定义样式})map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用map.enableContinuousZoom()// 可拖拽this.center.lng = 116.404this.center.lat = 39.915this.zoom = 15}
修改地图的中心点和层级方法 this.map.centerAndZoom(new BMap.Point(lng, lat), zoom)
点聚合
创建点聚合实例
this.pointSimplifierList = new BMapLib.MarkerClusterer(this.map, {markers: [],styles: [{url: require('../../assets/fullPage/distributed/12.png'),//点聚合图标背景图size: new BMap.Size(190, 36)//点聚合图标大小}]})
为点聚和填入点数据
drawClusterer(markerArr) {//markerArr是所有点的数组，其中包含了经纬度，点的图标，类型等const markarr = []for (let i = 0; i < markerArr.length; i++) {const point = new BMap.Point(markerArr[i].lng, markerArr[i].lat) // 循环生成新的地图点const icon = new BMap.Icon(markerArr[i].icon, new BMap.Size(48, 48))const marker = new BMap.Marker(point, { icon }) // 按照地图点坐标生成标记marker.info = markerArr[i]const that = thismarker.addEventListener('click', function(e) {//这里可以做点击效果，如点击出现详情弹窗等})markarr.push(marker)}this.pointSimplifierList.addMarkers(markarr)}
修改聚合点样式，增加聚合点其他触发效果
在index.html中引入两个文件,这里我是把这两个文件放在和index.html同级了<script src="/TextIconOverlay.js"></script><script src="/MarkerClusterer.js"></script>
修改这两个文件 MarkerClusterer.js中，找到原本带有的click事件，在下面照着写一个mouseover事件
this._clusterMarker.addEventListener('mouseover', function(event) {// that._markers 这个是所有的点，在drawClusterer中给他塞了一个info字段，在这里遍历这个数组就能拿到这个点的info// 如触摸展示弹窗，我是手写了一段html放在liHtml中，样式可以写在地图的vue文件里// same_data这个div写在地图的vue里let liHtml = ''const div = document.getElementById('same_data')div.style.left = event.pixel.x + 'px'div.style.top = event.pixel.y + 'px'div.style.display = 'block'div.innerHTML = liHtml})// 和他对应的还会监听一个mouseout事件同理。
TextIconOverlay.js中，修改的点聚合的样式，找到_updateText方法，对这段html进行修改，改为UI的样式，样式也是在写在vue中就可以；这里的this._text默认只有聚合点的数量，如果要其他信息，可以在 MarkerClusterer.js中this._clusterMarker.setText赋值的地方给修改一下
this._domElement.innerHTML = '<div class="amap-marker-content"><div class="info-name">' + this._text.name + '</div>' + '<div class="info-num">' + this._text.value + '</div><div>'
