uniapp百度地图聚合

// loadBMap.js  ak 百度key
export default function loadBMap(ak) {
	return new Promise((resolve, reject) => {
		//聚合API依赖基础库,因此先加载基础库再加载聚合API
		asyncLoadBaiduJs(ak)
			.then(() => {
				// 调用加载第三方组件js公共方法加载其他资源库
				// 加载聚合API
				// MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.js
				asyncLoadJs('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 = reject
		document.head.appendChild(script)
	})
}
// 加载第三方组件js公共方法
export function asyncLoadJs(url) {
	return new Promise((resolve, reject) => {
		let script = document.createElement('script')
		script.type = 'text/javascript'
		script.src = url
		document.head.appendChild(script)
		script.onload = () => {
			resolve()
		}
		script.onerror = reject
	})
}

// import loadBMap from '@/utils/loadBMap.js'
initMapc() {
				let that = this
				loadBMap('百度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)
					    	});
					    })
					});
				})
			},