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

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

Маркеры SVG перестают отображаться после добавления нескольких SVG markers stop showing after adding a few

Маркеры SVG снова отображаются после панорамирования SVG markers show again after pan

Это происходит в браузерах 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:

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

Ответы

Ответ 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');
  • Использовать png с тем же кодом и посмотреть, есть ли проблема только с svg

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

Edit:

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

Вот скрипт JS, чтобы увидеть это в действии.

Ответ 2

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

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

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

Кажется, ошибка в реализации V3. Miguel

Ответ 3

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

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

Багги с:

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

Ответ 4

Спасибо за "panTo" в ответ @Mauno Vähä!

Я также устанавливаю "optimized: false". Отлично работает.

Вот мой код, используя анимированный файл 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}
    });
}