Google Maps API v3 Маркеры SVG исчезают

Question

Я использую нотацию пути SVG для создания маркеров вместе с полилинией с использованием API карт Google v3. Иногда, добавляя несколько маркеров, они просто перестают показывать с карты. Если я панорамирую карту, даже только 1px, они снова показываются.

маркеры SVG Прекр после добавления нескольких

маркеры SVG показать еще раз после того, как пан

Это происходит в FF, Safari, Chrome и iPhone браузеров.

Вот мой код полилинии:

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); 

И код 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 
}); 

Любая идея, почему мои маркеры просто исчезают, когда они на самом деле находятся на карта? Заранее спасибо.

Вот скрипка, где вы можете воспроизвести проблему: http://jsfiddle.net/upsidown/gNQRB/

Вот YT видео, чтобы проиллюстрировать проблему: https://www.youtube.com/watch?v=uGAiwAuasmU

Edit:

A ошибки отчет был создан в Google: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5351

Answer 1

работает для меня, испытанные с Chrome (Windows) Версия 26.0.1410.64

Однако, несколько вещей, чтобы попробовать:

• Удалить маркер ZIndex, вы намеренно пытаются скрыть его под? см.: zIndex -20
• Удалить fillOpacity
• Вы сказали, что перемещение карты приносит его на видимое? Вы уже делаете map.setCenter();, но его недостаточно? вы можете альтернативно запускать одно из событий карты, когда вы добавляете маркер, поэтому вам не нужно его перемещать, например: google.maps.event.trigger(map, 'drag');
• Что делать, если вы храните все маркеры внутри массива и зацикливаете их, когда добавляется новый? и вызвать их google.maps.event.trigger(marker, 'icon_changed');
• Используйте PNGs с таким же кодом и посмотреть, если проблема с SVG только

Вот JS fiddle где я попробовал некоторые из этих вещей.

Edit:

После нескольких тестов я заметил, что с помощью map.panTo(latLng); вместо map.setCenter(latLng); делает маркеры SVG правильно рисовать. В качестве альтернативы, если вы не хотите панорамировать в центр, использование map.panBy(x, y); в качестве 1 пикселя, а затем обратно в предыдущий центр (быстрый) может иметь аналогичный эффект для решения этой проблемы.

JS fiddle чтобы видеть это в действии.

Answer 2

У меня была такая же проблема с использованием значков маркеров png для маркеров, несколько раз после fitBounds (некоторые маркеры исчезают, и они появляются, когда я увеличиваю масштаб), и только исчезает, если я делаю эти маркеры перетаскиваемыми.

Я пробовал это: map.panTo (map.getCenter()); после установки маркеров перетаскивание

И теперь он отлично работает. http://www.mapgolfcourse.com/view/2.php?card=no

Это кажется ошибкой реализации V3. Miguel

Answer 3

У меня был вид такой же проблема. При запуске было отображено около 10 на 100 маркеров. Затем после масштабирования или панорамирования все маркеры были либо сбиты, либо скрыты.

Узнайте, что это были значки svg в файлах значков, которые вызывают проблемы.

Buggy С:

<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"> 

Фиксированный с:

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

Answer 4

Спасибо за "пантомима" на @Mauno Ваха ответить!

Я также устанавливаю «оптимизированный: ложный». Прекрасно работает.

Вот мой код, используя анимированный файл SVG:

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} 
    }); 
}