Cómo manejar grandes cantidades de marcadores originales en Google Maps
es algo común cuando se tiene un número razonable de marcadores. Pero una vez que tienes cientos o más marcadores, el rendimiento rápidamente comienza a degradarse. En esta publicación de blog, le mostraré algunas formas de mejorar el rendimiento. Además, proporcionaré una página de prueba para comparar la eficiencia de estos métodos.
Si es la primera vez que utilizas los marcadores de Google Maps, te recomiendo aprender algunos conceptos básicos sobre el uso de marcadores en Google Maps.
Marker Manager - Marcadores de seguimiento
Tu primera opción puede ser utilizar MarkerManager, ya que es una biblioteca de utilidades proporcionada por Google. En lugar de usar GMap2.addOverlay() para agregar cada marcador al mapa uno por uno, primero agrega los marcadores a un MarkerManager, que realiza un seguimiento de todos ellos. Evite mostrar una gran cantidad de marcadores al mismo tiempo definiendo múltiples niveles de zoom diferentes para colocar colecciones de marcadores que pueden aparecer simultáneamente en el mismo nivel.
MarkerManager inicialmente será más lento que agregarlos directamente al mapa, pero el beneficio de agregarlos de esta manera es que tienes más control sobre ellos.
La adición de marcadores a MarkerManager se realiza mediante addMarker(GMarker, minZoom,
maxZoom?). Este método contiene tres parámetros. El primer parámetro es la marca que desea agregar. Los dos últimos parámetros son opcionales pero definen el nivel de visibilidad del marcador.
Un ejemplo sencillo
//Crear un nuevo mapa
var map=new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng( 59.5,14.0),6);
//Crear una nueva instancia de MarkerManager
var mgr = new MarkerManager(map);
//Crear un nuevo marcador
var marcador = new GMarker(new GLatLng(59.0, 13.80));
//Agregar marcador en MarkerManager
//Agregar marcador en MarkerManager
var marcador = new GMarker(new GLatLng(59.0, 13.80)); p>
mgr.addMarker(marker);
Obviamente, nadie querría que MarkerManager agregue un marcador, pero si tiene cientos de marcadores, este podría ser el camino a seguir.
Agregar marcadores en lotes
Una forma más eficiente de usar MarkerManager es agregar primero todos los marcadores a una matriz y luego usar addMarkers(markerArray, minZoom,
maxZoom?) Agregue la matriz al MarkerManager.
// Crea una nueva instancia de MarkerManager
var mgr = new MarkerManager(map
// Crea una matriz de marcadores
var marcadores = [];
// Crea una matriz de marcadores.
var marcadores = [];
// Bucle para crear marcadores y agregarlos a
MarkerManager
for(var i = 0; i < 50; i += 0.1) {
var marcador = new GMarker(new GLatLng(59.0 + i, 13.80 +
i));
marcadores.push( marcador );
}
// Agrega un marcador.
// Agrega la matriz al MarkerManager
mgr.addMarkers(markers
// Actualiza el MarkerManager para mostrar los marcadores en el mapa
p >
mgr.refresh();
Tenga en cuenta que mgr.refresh() ya no se utiliza después de agregar la matriz de marcadores al MarkerManager. Tenga en cuenta que se debe llamar a mgr.refresh() después de agregar la matriz de marcadores al MarkerManager. Si agrega marcadores uno por uno, no es necesario llamar a mgr.refresh().
Otros métodos
RemoveMarker(marker)
Elimina un marcador del MarkerManager.
clearMarkers()
Eliminar todos los marcadores.
getMarkerCount(zoom)
Devuelve el número de marcadores en el nivel de zoom especificado.
MarkerManager es una biblioteca de utilidades proporcionada por Google. Puede descargar el código fuente, así como la documentación y los ejemplos desde el siguiente enlace. Google
Maps MarkerManager SVN:
/svn/trunk/markermanager/release/
Marcador de luz - Marcador de dieta (marca resaltada - marca mayúscula)
Pamela Fox de Google
MarkerLight desarrolló un programa simple para reducir el marcado complejo y aumentar la eficiencia. La desventaja de esto es que en realidad solo muestra una imagen en el mapa, pero no puedes interactuar con ella.
La autora Pamelas explicó más tarde la razón por la que este método mejora la eficiencia:
La razón por la que GMarker tarda tanto es porque en realidad está compuesto por múltiples elementos DOM (primer plano, sombras, imprimibles). versiones, áreas en las que se puede hacer clic, etc.).
Si tu propósito es solo mostrar, entonces puedes elegir crear una extensión GOverlay (o color de fondo, mejor aún)
------Pamela Fox
Aquí se explica cómo usarlo:
map.addOverlay(new MarkerLight(latlng, {image: "red_dot.png"}));
Esta imagen se utilizará en la marca red_dot.png. Este es el marcado más pequeño y simple. Puedes intentar usar Marker Light-Combination MarkerManager usando Marker
Light
Hay muchos beneficios al agregar MarkerLight y MarkerManager de forma centralizada, y combinar los dos también es muy simple.
mgr.addMarker(new MarkerLight(latlng, {image: "red_dot.png"}));
La razón de esto es que puedes mostrar diferentes cantidades en diferentes niveles de zoom. marca. De esta manera puede asegurarse de que no se muestren demasiados marcadores al mismo tiempo.
Clusterer: muestra solo lo que necesitas
Una alternativa es utilizar ACME Labs Clusterer, una biblioteca de terceros que proporciona una forma más rápida de conectar etiquetas. La biblioteca se publica bajo la licencia BSD y está disponible de forma gratuita.
Para mejorar la eficiencia, solo necesitas hacer dos cosas:
1. Crear solo etiquetas que estén visibles actualmente.
2. Si hay demasiadas etiquetas para mostrar, se fusionarán en etiquetas de grupo.
De esta forma podrás mantener un buen rendimiento incluso con miles de marcadores en el mapa. Mis pruebas muestran que este enfoque es mucho más rápido que usar MarkerManager.
A continuación se explica cómo usarlo:
// Crear un objeto Clusterer
var clusterer = new Clusterer(map); // Crea un marcador
var marcador = new GMarker(new GLatLng(57.8, 14.0));
// Agrega el marcador al mapa
clusterer .AddMarker( marcador, 'texto al cuadro de información');
Llamar a clusterer.RemoveMarker(marker);
var clusterer.RemoveMarker(marker); clusterer.RemoveMarker (marcador);
Llamar a clusterer.RemoveMarker(marker);
var clusterer.RemoveMarker(marker);
// Agregar un marcador a el mapa.
Llame al método clusterer.RemoveMarker(marker) para eliminar un marcador del mapa. También hay formas de cambiar el comportamiento de los marcadores.
1.
clusterer.SetIcon(GIcon)
Cambiar el icono del cluster
2.
clusterer.SetMaxVisibleMarkers(n)
Establece el umbral para el número máximo de marcadores visibles, el valor predeterminado es 150.
3.
clusterer.SetMinMarkersPerCluster(n)
Establezca el número mínimo de marcas en el conjunto de marcas, el valor predeterminado es 5. SetMaxLinesPerInfoBox( n)
Establece el número máximo de líneas de texto en el cuadro de información. El valor predeterminado es 10.
Descargar
Clusterer2.js
ClusterMarker: fragmentarlos todos
ClusterMarker es un complemento jQuery gratuito, según GNU Universal lanzado bajo licencia pública***. La biblioteca es única porque detecta marcadores automáticamente, los cruza y los recopila en grupos de marcadores.