vue使用高德地图点聚合，点击显示弹窗

高德地图点聚合，点击地图上的点展示弹窗，再根据不同类型展示不同的图片

html

<div class="public-map" id="container"></div>

js

官网需要的数据格式

export default {
data() {
	return{
		maplist: [],
		map:null,
	    cluster: null,
	}
},
methods:{
    //请求数据
    getMaplist(){
    	//这里写你自己的请求
    	getlist().then(res=>{
			let arr = []
			let data = res.data
			data.forEach(item=>{
				arr.push({
				//将数据处理成高德地图官网需要的形式
					lnglat:[item.Longitude, item.Latitude]
				}}
			})
			this.maplist=arr
		})
    },
	//初始化地图
	getmap() {
				AMapLoader.load({
						key: '你得key',
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: ["AMap.Geolocation", "AMap.AutoComplete", 'AMap.PlaceSearch',
							"AMap.Geocoder"
						], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
						AMapUI: {
							// 是否加载 AMapUI，缺省不加载
							version: "1.1", // AMapUI 版本
							plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
						},
						Loca: {
							// 是否加载 Loca， 缺省不加载
							version: "2.0", // Loca 版本
						},
					})
					.then((AMap) => {
						// console.log(AMap)
						this.map = new AMap.Map("container", { //设置地图容器id
							viewMode: "3D", //是否为3D地图模式
							zoom: 10, //初始化地图级别
							center: [104.937478,35.439575], //初始化地图中心点位置
							//mapStyle: 'amap://styles/darkblue',  //地图颜色
						});
						//此处将数据换成官网需要的格式
						var points = [];
						this.maplist.forEach(item=>{
							points.push({lnglat:item.lnglat})
						})
						var count = points.length;
						//聚合样式
						var _renderClusterMarker = function(context) {
							console.log(context)
							var factor = Math.pow(context.count / count, 1 / 18);
							var div = document.createElement('div');
							var Hue = 180 - factor * 180;
							var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
							var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
							var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
							var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
							div.style.backgroundColor = bgColor;
							var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
							div.style.width = div.style.height = size + 'px';
							div.style.border = 'solid 1px ' + borderColor;
							div.style.borderRadius = size / 2 + 'px';
							div.style.boxShadow = '0 0 5px ' + shadowColor;
							div.innerHTML = context.count;
							div.style.lineHeight = size + 'px';
							div.style.color = fontColor;
							div.style.fontSize = '14px';
							div.style.textAlign = 'center';
							context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
							context.marker.setContent(div)
						};
						var _renderMarker = function(context){
							//可以根据数据的不同类型进行判断
							let img = '';
							let content = '';	
							context.data.forEach(item=>{
								if(item.Name=='a'){
								   img=require('你的图片路径')
								}else{
								   img=require('你的图片路径')
								}
							})							
							content = '<img src=' + img + ' style="height: 20px; width: 20px;">';
							var offset = new AMap.Pixel(-9, -9);
							context.marker.setContent(content)
							context.marker.setOffset(offset)
						}
						var that = this
						this.map.plugin(['AMap.MarkerClusterer'], function() {
						      that.cluster = new AMap.MarkerClusterer(
						        that.map, // 地图实例
						        that.maplist, // 海量点组成的数组
						        {
						          gridSize: 30,
						          zIndex: 2,
						          zoomOnClick: false,
						          renderClusterMarker: _renderClusterMarker,
								  renderMarker:_renderMarker
						        })
						    })
							 this.cluster.on('click', (cluster, lnglat, target, markers) => {
								   this.setInfoWindow(cluster.clusterData[0])
							})
					}).catch((e) => {});
			},
			// 窗体信息
			setInfoWindow(item) {
				var content = '这是信息窗体！'
				const infoWindow = new AMap.InfoWindow({
					content, // 使用默认信息窗体框样式，显示信息内容
					offset: new AMap.Pixel(0, -40),
					closeWhenClickMap: true,
				})
				infoWindow.open(this.map,item.lnglat);
			},

		}
}

附加一下高德地图的引用

在public文件夹下的index.html里写入自己的钥

<script type="text/javascript">
      window._AMapSecurityConfig = {
		  securityJsCode: '你早高德地图申请的钥',//密钥
      }
</script>