Javascript clustering cluster para Google Maps - 💡 Fix My Ideas

Javascript clustering cluster para Google Maps

Javascript clustering cluster para Google Maps


Autor: Ethan Holmes, 2019

Todos los que trabajan con grandes conjuntos de datos en Google Maps se han encontrado con el problema de mostrar un grupo de marcadores en un área pequeña. No solo una monstruosidad que muestre más de cien íconos de marcadores a la vez puede atascar el navegador en muchas plataformas, Safari en PPC Mac es lo que produce más dolor.

La solución es agrupar los marcadores cercanos en un marcador agregado cuando se muestran demasiados marcadores, o cuando los marcadores están tan cerca en un nivel de zoom particular que se superponen completamente. Para conjuntos de datos extremadamente grandes, esto se realiza de manera más eficiente en el back-end, con sucesivas llamadas AJAX que actualizan el conjunto de marcadores desde un script PHP que filtra los marcadores visibles del conjunto.

También puede manejar la agrupación en clúster en el lado del cliente, utilizando javascript para explorar todo el conjunto de ubicaciones y determinar de forma dinámica qué es visible y qué debe agruparse. El inconveniente es que tiene que descargar todo el conjunto y almacenarlo en la memoria del navegador, pero a menos que comience a usar decenas de miles de marcadores, no es un gran problema. El beneficio del método del lado del cliente es que es menos complejo, le permite solucionar grandes conjuntos de resultados de API de back-end que no puede controlar, y con la biblioteca de clusters de javascript de ACME Labs es extremadamente fácil de codificar.

Para usar Clusterer, primero descargue e incluya el archivo Clusterer2.js del enlace a continuación en su página de mapas. Luego necesita crear una instancia de un objeto Clusterer, pasando su objeto de mapa a su constructor:

var clusterManager = nuevo Clusterer (mapa);

A partir de ahí, lo usas en lugar del tradicional MarkerManager o de cualquier llamada addOverlay llamando al método addMarker del Clusterer. Se requieren dos parámetros, el marcador para agregar y una cadena de texto que se incluirá en el contenido del clúster cuando se haga clic:

clusterManager.AddMarker (marcador, "Descripción del marcador");

El administrador del clúster se encargará de todo el trabajo sucio, solo mostrará los elementos cuando estén dentro de su vista y los agrupará de manera dinámica cuando haya demasiados en la pantalla a la vez. Cuando se hace clic en uno de los grupos, se mostrará una lista de las ubicaciones dentro de él. La mayoría de lo que querría modificar, como el umbral en el que se inicia el agrupamiento en clúster y el icono utilizado para representar un clúster, se pueden ajustar a través de la API a través de algunos métodos autoexplicativos como SetMaxVisibleMarkers (n) y SetIcon (icono) . Siga el enlace a continuación para obtener más información, o lea la fuente para conocer algunas de las opciones menos documentadas.

Documentación Clusterer Fuente Clusterer



Puede Que Le Interesen

12 pasos con Paul Polak

12 pasos con Paul Polak


Bienvenido - Remake: America

Bienvenido - Remake: America


Made on Earth - Trailer (Re) Made

Made on Earth - Trailer (Re) Made


Haciendo problemas - ¿5,000 días? Objetivos de CO2 y cuánto combustible fósil podemos quemar

Haciendo problemas - ¿5,000 días? Objetivos de CO2 y cuánto combustible fósil podemos quemar