google-maps-api-3 - notes - map version google maps

Los marcadores SVG de Google Maps API v3 desaparecen

Question

Estoy usando la notación de ruta SVG para crear marcadores junto con una polilínea mediante la API de Google Maps v3. A veces, después de agregar algunos marcadores, dejan de mostrarse en el mapa. Si muevo el mapa, incluso solo 1px, se muestran de nuevo.

Los marcadores SVG dejan de mostrarse después de agregar algunos

Marcadores SVG muestran de nuevo después de la bandeja

Esto sucede en los navegadores FF, Safari, Chrome y iPhone.

Aquí está mi código para la polilínea:

var lineSymbol = {
    path: g.SymbolPath.FORWARD_OPEN_ARROW,
    scale:1.5
};

polyOptions = {
    strokeColor: ''#0026b3'',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    geodesic: true,
    icons: [{
        icon: lineSymbol,
        repeat: ''100px''
    }],
    zIndex: 10
};

polyLine = new g.Polyline(polyOptions);
polyLine.setMap(map);

Y el código para el marcador SVG:

var path = polyLine.getPath();
path.push(event.latLng);

var icon = {

    path: "M68.501,23.781 43.752,48.529 66.918,71.695 66.918,120.362 70.085,120.362 70.085,71.694 93.249,48.529",
    fillColor: iconColor,
    fillOpacity: .8,
    anchor: new g.Point(70.085, 120.362),
    strokeWeight: 0,
    scale:.4
};

var marker = new g.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon,
    title: title,
    zIndex : -20
});

¿Alguna idea de por qué mis marcadores desaparecen cuando están en el mapa? Gracias por adelantado.

Aquí hay un violín donde puedes reproducir el problema: http://jsfiddle.net/upsidown/gNQRB/

Aquí hay un video de YT para ilustrar el problema: https://www.youtube.com/watch?v=uGAiwAuasmU

Editar:

Se ha creado un informe de error en Google: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5351

Answer 1

Alguien sugirió más arriba que desplazarse por 1 píxel y viceversa. Este es un fyi en el que panBy (0,0) también funciona con la ventaja de ser más simple y sin artefactos visuales:

Tuvo el mismo problema al usar tomchentw / react-google-maps. El uso de panBy (0,0) en onMapIdle () solucionó el problema. Si no está utilizando un paquete, supongo que la adición de un detector de eventos ''inactivo'' con panBy (0,0) funcionará.

Answer 2

Funciona para mí, probado con Chrome (Windows) versión 26.0.1410.64

Sin embargo, algunas cosas para probar:

• Quitar marcador zIndex , ¿está intentando ocultarlo a propósito? ver: zIndex -20
• Eliminar fillOpacity
• ¿Dijiste que el mapa en movimiento lo hace visible? Ya estás haciendo map.setCenter (); ¿pero no es suficiente? como alternativa, puede activar uno de los eventos del mapa cuando agrega un marcador para no tener que moverlo, como: google.maps.event.trigger(map, ''drag'');
• ¿Qué sucede si almacena todos los marcadores dentro de la matriz y los repite cuando se agrega uno nuevo? y desencadenar su google.maps.event.trigger(marker, ''icon_changed'');
• Use pngs con el mismo código y vea si el problema es solo con svg

Aquí está el violín de JS donde probé algunas de estas cosas.

Editar:

Después de varias pruebas noté que usando map.panTo(latLng); en lugar de map.setCenter(latLng); Hace marcadores SVG para dibujar correctamente. Alternativamente, si no desea desplazarse para centrar, utilice map.panBy(x, y); como 1 píxel y luego volver al centro anterior (rápido) podría tener un efecto similar al resolver este problema.

Aquí está el violín de JS para ver eso en acción.

Answer 3

Gracias por la respuesta "panTo" en @Mauno Vähä!

También estoy configurando "optimizado: falso". Funciona genial.

Aquí está mi código usando un archivo svg animado:

var marker;
var map;

var image = {
    url: "http://localhost:8080/images/animarker.svg",
    size: new google.maps.Size(100, 100),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(42, 42),
    scaledSize: new google.maps.Size(100, 100)
};

function initMap() {
    map = new google.maps.Map(document.getElementById(''map''), {
        zoom: 17,
        center: {lat: 59.325, lng: 18.070}
    });

    marker = new google.maps.Marker({
        map: map,
        icon: image,
        draggable: false,
        optimized: false,
        position: {lat: 59.327, lng: 18.067}
    });
}

Answer 4

Tuve el mismo problema al usar los íconos de marcadores png para los marcadores, algunas veces después de fitBounds (algunos marcadores desaparecen y aparecen cuando me acerco) y solo desaparece si hago que estos marcadores sean draggables.

Intenté esto: map.panTo (map.getCenter ()); después de configurar marcadores draggables

Y ahora funciona bien. http://www.mapgolfcourse.com/view/2.php?card=no

Parece un error en la implementación de V3. Miguel

Answer 5

Tuve los mismos problemas. Aproximadamente 10 de cada 100 marcadores se mostraron en el lanzamiento. Luego, después de hacer zoom o panear, todos los marcadores quedaron bloqueados u ocultos.

Averigüe que fueron las marcas de svg en los archivos de iconos que causaron el problema.

Buggy Con:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">

Corregido con:

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">