Оптимизация маркеров SVG в Картах Google

Есть ли хорошие способы оптимизации того, как Google Maps API v3 рисует маркеры в HTML-документе при использовании символов SVG для значков? Вот пример маркера с использованием символов SVG:

  var star = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow'
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: star,
    map: map,
    optimized: true //Does not seem to do anything..
  });

Google имеет это свойство под названием "оптимизировано", которое может быть установлено на маркеры, а при использовании, например, значков PNG вместо SVG-рисунков это прекрасно работает: Google создает один холст на один фрагмент вместо одного img на значок, что очевидно масштабирование намного лучше.

"Оптимизированное" свойство, однако, ничего не делает при использовании SVG-маркеров: они всегда кажутся нарисованными в одном холсте на маркер. Когда у меня много маркеров, некоторые браузеры начинают иметь проблемы с производительностью. Обычно Chrome обрабатывает все, но IE9, например, не обрабатывает многие маркеры, прежде чем показывать значительные проблемы с производительностью. В этом случае кластеризация не является вариантом.

Кто-нибудь знает какие-либо хорошие способы оптимизации этого, так что браузеры могут обрабатывать больше маркеров SVG одновременно?

Ответ 1

Насколько сложны пиктограммы SVG, которые вы генерируете? Поскольку вы также можете сами нарисовать значок на холсте и использовать метод toDataURL для генерации данных-uri для использования в Картах Google, Это фактически создало бы растровое изображение, чтобы оно могло работать в IE9 (по крайней мере поддерживается метод).

Вы также можете нарисовать SVG на холсте, но есть некоторые оговорки, если вы хотите их программно изменить. И IE9, вероятно, не будет сотрудничать, поэтому я не уверен, что это путь.

Ответ 2

По моему опыту вы можете использовать этот script, и он отлично работает:

var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 10
      },
      draggable: true,
      map: map
    });

Также, если вы захотите использовать SVG файл из css. его можно использовать следующим образом:

var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: {
        path: 'M22-48h-44v43h16l6 5 6-5h16z',
        fillColor: '#6331AE',
        fillOpacity: 1,
        strokeColor: '',
        strokeWeight: 0
      },
    map_icon_label: '<span class="class_name1 class_name2"></span>', 
  draggable: true,
  map: map
});

Затем вы можете добавить значения CSS в class_name1 и class_name2, чтобы принести изображение svg в квадрат. Если вы хотите изменить фон маркера на некоторые общие способы, я разделил ниже некоторые общие пути маркеров:

    MAP PIN = 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';
    SQUARE PIN = 'M22-48h-44v43h16l6 5 6-5h16z';
    SHIELD = 'M18.8-31.8c.3-3.4 1.3-6.6 3.2-9.5l-7-6.7c-2.2 1.8-4.8 2.8-7.6 3-2.6.2-5.1-.2-7.5-1.4-2.4 1.1-4.9 1.6-7.5 1.4-2.7-.2-5.1-1.1-7.3-2.7l-7.1 6.7c1.7 2.9 2.7 6 2.9 9.2.1 1.5-.3 3.5-1.3 6.1-.5 1.5-.9 2.7-1.2 3.8-.2 1-.4 1.9-.5 2.5 0 2.8.8 5.3 2.5 7.5 1.3 1.6 3.5 3.4 6.5 5.4 3.3 1.6 5.8 2.6 7.6 3.1.5.2 1 .4 1.5.7l1.5.6c1.2.7 2 1.4 2.4 2.1.5-.8 1.3-1.5 2.4-2.1.7-.3 1.3-.5 1.9-.8.5-.2.9-.4 1.1-.5.4-.1.9-.3 1.5-.6.6-.2 1.3-.5 2.2-.8 1.7-.6 3-1.1 3.8-1.6 2.9-2 5.1-3.8 6.4-5.3 1.7-2.2 2.6-4.8 2.5-7.6-.1-1.3-.7-3.3-1.7-6.1-.9-2.8-1.3-4.9-1.2-6.4z';
    ROUTE = 'M24-28.3c-.2-13.3-7.9-18.5-8.3-18.7l-1.2-.8-1.2.8c-2 1.4-4.1 2-6.1 2-3.4 0-5.8-1.9-5.9-1.9l-1.3-1.1-1.3 1.1c-.1.1-2.5 1.9-5.9 1.9-2.1 0-4.1-.7-6.1-2l-1.2-.8-1.2.8c-.8.6-8 5.9-8.2 18.7-.2 1.1 2.9 22.2 23.9 28.3 22.9-6.7 24.1-26.9 24-28.3z';
    SQUARE = 'M-24-48h48v48h-48z';
   SQUARE_ROUNDED = 'M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z';

Надеюсь, это поможет вам.

Ответ 3

здесь svg patch для ie, и вы должны использовать как

<!--[if IE 9]>
   <script src="svg.js"></script>
<![endif]-->