agrupación de marcador de Google Maps

Estoy tratando de lograr lo siguiente: tener diferentes tipos de marcadores en mi mapa, por ejemplo, escuelas, bibliotecas, paradas de autobús y quiero poder mostrar/ocultar cada grupo de marcadores.agrupación de marcador de Google Maps

He estado buscando en Google de un tiempo, pero nada se acercó:/

Alguna idea de cómo se puede conseguir esto?

Fuente

2010-07-10 Aviatrix

El código de playas funciona con esta corrección: posición: nuevo google.maps.LatLng (playas [i] [1], playas [i] [2]), – dalton

Nunca hice algo así (mostrando/ocultando marcadores), así que todo lo que puedo es publicar un enlace a un ejemplo http://econym.org.uk/gmap/example_categories.htm – robertbasic

Hay varias maneras de abordar esto, pero déjame mostrarte un enfoque.

En primer lugar, vamos a empezar con una gran variedad de ubicaciones (tomado de la Google Maps API Tutorials):

var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 1], 
    ['Coogee Beach', -33.923036, 151.259052, 1], 
    ['Cronulla Beach', -34.028249, 151.157507, 2], 
    ['Manly Beach', -33.800101, 151.287478, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 2] 
];

Esto es en realidad una matriz de matrices. Representa 5 playas australianas, y tenemos el nombre, la latitud, la longitud y la categoría. La categoría en este caso es solo un número por simplicidad.

Entonces es importante que conservemos una referencia de los marcadores que creamos. Para ello, podemos utilizar una matriz markers donde almacenamos cada nuevo marcador, y también podemos aumentar cada objeto marcador con su ID de categoría:

var markers = []; 

var i, newMarker; 

for (i = 0; i < beaches.length; i++) { 
    newMarker = new google.maps.Marker({ 
    position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
    map: map, 
    title: beaches[i][0] 
    });  

    newMarker.category = beaches[i][3];  
    newMarker.setVisible(false); 

    markers.push(newMarker); 
}

Por último, cuando tenemos que mostrar los marcadores, podemos simplemente itere sobre la matriz markers, y llame al método setVisible() según la categoría que nos gustaría mostrar.

Es posible que desee comprobar hacia fuera el siguiente ejemplo completo:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
    <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 
    <div id="map" style="width: 400px; height: 300px;"></div> 

    <input type="button" value="Show Group 1" onclick="displayMarkers(1);"> 
    <input type="button" value="Show Group 2" onclick="displayMarkers(2);"> 

    <script type="text/javascript"> 

    var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 1], 
    ['Coogee Beach', -33.923036, 151.259052, 1], 
    ['Cronulla Beach', -34.028249, 151.157507, 2], 
    ['Manly Beach', -33.800101, 151.287478, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 2] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.88, 151.28), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 

    var i, newMarker; 

    for (i = 0; i < beaches.length; i++) { 
    newMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
     map: map, 
     title: beaches[i][0] 
    }); 

    newMarker.category = beaches[i][3]; 
    newMarker.setVisible(false); 

    markers.push(newMarker); 
    } 

    function displayMarkers(category) { 
    var i; 

    for (i = 0; i < markers.length; i++) { 
     if (markers[i].category === category) { 
     markers[i].setVisible(true); 
     } 
     else { 
     markers[i].setVisible(false); 
     } 
    } 
    } 

    </script> 
</body> 
</html>

Captura de pantalla del ejemplo anterior, después de hacer clic en el botón "Mostrar grupo 2":

Google Maps JavaScript API v3 Example: Marker Categories http://img535.imageshack.us/img535/8485/markercat.jpg

Fuente

2010-07-10 14:36:34

buen tutorial! Gracias ! pero hay un agujero en su función displayMarkers :) si usamos la función para mostrar/ocultar tenemos que verificar si el marcador ya está oculto/mostrado para establecerlo/ocultarlo;) for (var i = 0 ; i Aviatrix

@Aviatrix: Mi enfoque en el ejemplo fue ocultar todos los marcadores que no coinciden con el argumento de categoría. Esto sucedió en el 'else {marcadores [i] .setVisible (falso); } 'part. Esto significa que a veces se llama a 'setVisible (false)' para los marcadores que ya están ocultos. Supongo que la API de Maps verifica el estado del marcador internamente.Es por eso que no estaba verificando la visibilidad con 'getVisible()' ... Obviamente, su enfoque es igualmente bueno. –

errores corregidos en el código publicado ([ejemplo de trabajo] (http://www.geocodezip.com/v3_SO_toggleCategories.html)) – geocodezip

Es, básicamente, solo necesita almacenar referencias a objetos Marker en una matriz, establecer su tipo (escuela, parada de autobús, etc.) y luego en algún evento recorrer y ocultar/mostrar según corresponda:

var markers = []; 

// create Marker 

marker.locType = 'school'; //as appropriate 

function hideMarkersOfType(type) { 
    var i = markers.length; 
    while(i--) { 
     if (markers[i].locType == type) { 
      markers[i].setVisible(false); 
     } 
    } 
} 

// similar function showMarkersOfType() calling markers[i].setVisible(true);

Eso debería ser un buen comienzo de todos modos.

Fuente

2010-07-10 14:36:58

excepto que sería mejor usar 'markers.setMap (null);' de esta manera el mapa funciona mejor. – tim

agrupación de marcador de Google Maps

Respuesta

Cuestiones relacionadas