javascript - marcadores - google.maps.marker label

Google Maps V3: mostrar solo marcadores en la ventana gráfica-Borrar el problema de los marcadores

Question

Me gusta crear un mapa con Google Maps que pueda manejar grandes cantidades de marcadores (más de 10.000). Para no ralentizar el mapa, he creado un archivo XML que solo muestra los marcadores que están dentro de la ventana gráfica actual.

Primero, uso initialize () para configurar las opciones del mapa:

function initialize() {
    var myLatlng = new google.maps.LatLng(51.25503952021694,3.27392578125);
    var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, ''tilesloaded'', function () {
    loadMapFromCurrentBounds(map);
    }); 
}

Cuando finaliza el evento ''tilesloaded'', utilizo loadMapFromCurrentBounds (), estas funciones obtendrán los límites actuales y enviarán una solicitud al archivo XML para mostrar los marcadores que están dentro de la ventana gráfica actual:

function loadMapFromCurrentBounds(map) {

    // First, determine the map bounds
    var bounds = map.getBounds();

    // Then the points
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();

    // Now, each individual coordinate
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();

    downloadUrl("mapsxml.php?swLat="+swLat+"&swLng="+swLng+"&neLat="+neLat+"&neLng="+neLng+"", function(data) {
        var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        var infoWindow = new google.maps.InfoWindow; 

        for (var i = 0; i < markers.length; i++) {
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var name = markers[i].getAttribute("name");

            var point = new google.maps.LatLng( 
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng"))
            );

            var html = "<b>" + name + "</b> <br/>" + address;
            var icon = customIcons[type] || {};

            var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow});

            bindInfoWindow(marker, map, infoWindow, html);
        }
    })
}

Esto funciona muy bien, sin embargo, el código actual no descarga marcadores que ya no están en la vista. Además de eso, vuelve a cargar marcadores que ya están cargados, lo que ralentiza el mapa realmente rápido al mover el mapa una vista veces en la misma área.

Entonces, cuando la ventana gráfica cambia, me gusta borrar todo el mapa primero antes de cargar nuevos marcadores. ¿Cuál es la mejor manera de hacer esto?

Answer 1

Debido a la siguiente explicación, el uso de ''tilesloaded'' o ''bounds_changed'' sería muy incorrecto y provocaría disparos continuos involuntarios. En su lugar, desearía utilizar el evento ''inactivo'' que se activará una vez que el usuario haya detenido el desplazamiento / acercamiento.

google.maps.event.addListener (map, ''idle'', loadMapFromCurrentBounds);

https://developers.google.com/maps/articles/toomanymarkers#viewportmarkermanagement

Answer 2

Es posible que desee consultar esta documentación de https://developers.google.com/maps/articles/toomanymarkers#viewportmarkermanagement . Explica lo que necesitas:

With the new list of markers you can remove the current markers 
(marker.setMap(null)) that are on the map and 
add the new ones (marker.setMap(map)).

Answer 3

Es posible que desee verificar este hilo. Daniel respondió esto bastante bien.

¿Cuál es la forma más eficiente de crear rutas en google maps desde archivos gps?

Además, bounds_changed es la primera oportunidad para llamar a tu función. tilesloaded, se llamará constantemente. La ventana gráfica puede contener más de un mosaico para llenar la ventana gráfica.

Alternativamente, también puede hacer un setVisible (falso).

Para eliminar el marcador, es posible que deba eliminar los oyentes.

google.maps.event.clearInstanceListeners(marker);
marker.setMap(null);
markers.remove(marker);
delete marker;

Answer 4

Este artículo lo pasa bastante bien: cargar dinámicamente miles de marcadores en Google Maps

• cargar dinámicamente los marcadores hasta que lleguemos a un umbral
• mantener una tabla hash de marcadores que ya se han agregado
• una vez que se alcanza el umbral, quite los marcadores que no están actualmente dentro de la ventana gráfica
• elimine todos los marcadores del mapa cuando el usuario se haya alejado, y no cargue ningún marcador hasta que el usuario vuelva a un nivel razonable

Answer 5

Necesita agregar otro Escuchador de eventos al mapa:

google.maps.event.addListener(map,''bounds_changed'', removeMarkers);

Consulte here para obtener más información sobre la eliminación de todos los marcadores de un mapa de Google. Desafortunadamente, no creo que se pueda hacer con una sola llamada. Por lo tanto, tendrá que escribir removeMarkers o algo similar que tendrá que iterar a través de todos los marcadores en el mapa eliminándolos individualmente de esa manera:

 markersArray[i].setMap(null);

No sé si es más rápido verificar si el marcador está en la ventana gráfica antes de eliminarlo usando:

 map.getBounds();

Lea más acerca de los eventos de Google Map API v3

Answer 6

Su función original parece mucho código. Haría algo como esto:

if( map.getBounds().contains(markers[i].getPosition()) ) {
   myMarkerDisplayFunction(markers[i]);
}