Пустое пространство вокруг значков маркеров карты Google в режиме устройства Chrome - PullRequest
Новая
       17

Пустое пространство вокруг значков маркеров карты Google в режиме устройства Chrome

0 голосов
/ 19 сентября 2018

Я пытаюсь использовать SVG-файл в качестве значков моего маркера.Все выглядит великолепно, за исключением того факта, что вокруг маркера есть гигантское пустое пространство, что делает их невероятно сложными для взаимодействия при группировании.Я попытался использовать icon.size и icon.scaledSize для решения моей проблемы, но я все еще не могу удалить пустое пространство.Возможно, это мой svg-файл? 

  function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: {
        url: 'assets/icons/art.svg'
    }
  });
}

это svg (преобразованный в png) Фактический svg, о котором идет речь

Вот проблема

РЕДАКТИРОВАТЬ:

Оказалось, что использование Режим устройства Chrome мешало тому, как Карты отображали значки.

В итоге я увидел ожидаемый результат после того, как последовал совет @bonnie (обрезал лишние места в моих файлах), настроил свойства icon.scale и icon.scaledSize и вышел из режима устройства.

Окончательный значок объекта был: 

icon = {
    url: 'assets/icons/art.svg',
    size: new google.maps.Size(35, 35),
    scaledSize: new google.maps.Size(40, 40)
};

Карты Google отображены icon.size как image & icon.scaledSize как image

Я до сих пор не понимаю, почему в Chrome Device Mode не отображаются значки маркеров должным образом.

1 Ответ

0 голосов
/ 19 сентября 2018

Область просмотра SVG слишком велика.Если вы открываете в графической программе, такой как Illustrator, вы можете отрегулировать размер артборда, чтобы в нем не было пустого пространства по краю графика.

...