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

最新推荐文章于 2025-06-18 17:32:11 发布

Fay away

最新推荐文章于 2025-06-18 17:32:11 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46700289/article/details/128932889

该文章讲述了如何在高德地图上实现点聚合功能，当点击地图上的点时展示弹窗，并根据数据类型展示不同的图片。首先，通过JavaScript处理数据，将其转化为高德地图所需格式，然后加载地图并初始化设置，包括3D模式、缩放级别和中心点。接着，利用MarkerClusterer插件实现点聚合，并自定义渲染函数以展示不同类型的图标。最后，添加点击事件监听，打开信息窗体显示详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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"
						], // 需要使用的的插件列