百度地圖使用及點聚合功能

由于后臺固定了百度地圖，百度地圖和高德地圖經緯度轉換有次數限制，不能滿足項目的正常運行，所以切換了百度地圖，下面對使用中遇到的問題進行記錄：

安裝及使用百度地圖：

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>'

總結

以上是生活随笔為你收集整理的vue中百度地图使用及自定义点聚合样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。