Google Map MarkerCluster 点聚合使用简介

momo577

已于 2022-09-29 14:19:40 修改

阅读量1.8k

点赞数

文章标签： javascript 前端 vue.js

于 2022-09-29 14:17:14 首次发布

本文链接：https://blog.csdn.net/momo577/article/details/127104096

版权

本文介绍了如何在JavaScript和Vue.js应用中实现谷歌地图的点聚合功能，使用了@googlemaps/markerclusterer库。步骤包括：1.通过NPM安装库；2.创建并配置MarkerClusterer实例；3.展示实际应用中如何处理点击事件和设置自定义渲染器。

摘要由CSDN通过智能技术生成

谷歌地图点聚合功能的实现，及参数设置

1.使用 NPM 安装最新版本的 @googlemaps/markerclusterer 库。

npm install @googlemaps/markerclusterer

2.在应用中添加标记聚类器

import { MarkerClusterer } from "@googlemaps/markerclusterer";

const markerCluster = new MarkerClusterer({ map, markers });

3.使用情况

import { MarkerClusterer,defaultOnClusterClickHandler } from "@googlemaps/markerclusterer";

let markerClusterer = null;
function initMap() {

//初始化地图
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});

const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

// 创建一个设置markers方法
const setMarkers = (setmarkers) &