uniapp百度地图聚合

// loadBMap.js  ak 百度key
export default function loadBMap(ak) {return new Promise((resolve, reject) => {//聚合API依赖基础库,因此先加载基础库再加载聚合APIasyncLoadBaiduJs(ak).then(() => {// 调用加载第三方组件js公共方法加载其他资源库// 加载聚合API// MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.jsasyncLoadJs('http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js').then(() => {asyncLoadJs('http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js').then(() => {asyncLoadJs('http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js').then(() => {resolve()return true}).catch(err => {reject(err)})}).catch(err => {reject(err)})}).catch(err => {reject(err)})}).catch(err => {reject(err)})})
}
// 加载百度地图基础组件js
export function asyncLoadBaiduJs(ak) {return new Promise((resolve, reject) => {if (typeof BMap !== 'undefined') {resolve(BMap)return true}window.onBMapCallback = function() {resolve(BMap)}let script = document.createElement('script')script.type = 'text/javascript'script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&s=1&callback=onBMapCallback'script.onerror = rejectdocument.head.appendChild(script)})
}
// 加载第三方组件js公共方法
export function asyncLoadJs(url) {return new Promise((resolve, reject) => {let script = document.createElement('script')script.type = 'text/javascript'script.src = urldocument.head.appendChild(script)script.onload = () => {resolve()}script.onerror = reject})
}

// import loadBMap from '@/utils/loadBMap.js'
initMapc() {let that = thisloadBMap('百度key').then(() => {map = new BMap.Map('mapContainer')const centerPoint = new BMap.Point(that.longitude, that.latitude)map.centerAndZoom(centerPoint, that.zoom)// 添加缩放控件map.addControl(new BMap.NavigationControl());markerArr = [];that.parkList.forEach(item => {let point = new BMap.Point(item.longitude, item.latitude);let marker = new BMap.Marker(point);marker.id = item.id;marker.title = item.name;marker.address = item.address// 添加标签const opts = {position: point, // 指定文本标注所在的地理位置offset: new BMap.Size(8, -30) // 设置文本偏移量};// 创建文本标注对象let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +item.name +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +item.address + "</div>" + "</div>"const label = new BMap.Label(c, opts);// 自定义文本标注样式label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',// ointerEvents: 'none' // 设置文本标签不接受鼠标事件});// 将标签添加到地图中// map.addOverlay(label);// 添加信息窗口marker.addEventListener('click', function() {// alert(`Marker ID: ${marker.id}, Title: ${marker.title}`);that.navigateTo('/pages/shop/packageList?id=' + marker.id + "&name=" +marker.title)});label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id + "&name=" +marker.title)});label.setZIndex(999); // 设置zIndex属性marker.setLabel(label);markerArr.push(marker);map.addOverlay(marker);})var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markerArr})// 监听地图移动、放大缩小事件map.addEventListener("movestart", function(){markerClusterer.getMarkers().forEach(marker => {// console.log(marker.id)let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>"const label = new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',});marker.setLabel(label);map.addOverlay(marker);label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id +"&name=" +marker.title)});})});map.addEventListener("moveend", function(){markerClusterer.getMarkers().forEach(marker => {// console.log(marker.id)let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>"// // 添加文本标签到每个 marker 上// const label = new BMap.Label(c, {// 	position: marker.getPosition(),// 	offset: new BMap.Size(20, -10)// });const label = new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',});marker.setLabel(label);map.addOverlay(marker);label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id +"&name=" +marker.title)});})});map.addEventListener("zoomstart", function(){markerClusterer.getMarkers().forEach(marker => {// console.log(marker.id)let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>"// // 添加文本标签到每个 marker 上// const label = new BMap.Label(c, {// 	position: marker.getPosition(),// 	offset: new BMap.Size(20, -10)// });const label = new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',});marker.setLabel(label);map.addOverlay(marker);label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id +"&name=" +marker.title)});})});map.addEventListener("zoomend", function(){markerClusterer.getMarkers().forEach(marker => {// console.log(marker.id)let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>"// // 添加文本标签到每个 marker 上// const label = new BMap.Label(c, {// 	position: marker.getPosition(),// 	offset: new BMap.Size(20, -10)// });const label = new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',});marker.setLabel(label);map.addOverlay(marker);label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id +"&name=" +marker.title)});})});})},