Использовать SVG для маркера в Картах Google?

Я знаю, что можно добавить наложения svg на карты Google. Мне интересно, можете ли вы использовать svg-файлы в качестве маркеров. я попытался установить его так же, как вы бы png или jpg-файл, но ничего не появляется. дайте мне знать, если я должен опубликовать свой код, но я думаю, что я, вероятно, приближаюсь к нему неправильно.Использовать SVG для маркера в Картах Google?

спасибо.

источник

2010-10-15 vee

никто не прежде, чем это сделал? – vee

может помочь с этим ... – vee

На Google Maps API v3 это работает очень хорошо для меня с этим кодом (который также обрабатывает изменение размера):

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lng), 
    icon: new google.maps.MarkerImage('/path/to/icon.svg', 
    null, null, null, new google.maps.Size(64,64)), 
    draggable: false, 
    map: map 
});

источник

2012-08-31 11:18:11

таким образом, gmaps создадут тэг в любом случае. вы должны использовать Символ (https://developers.google.com/maps/documentation/javascript/symbols) вместо этого! – Khalizar

Если у вас возникли проблемы с его внедрением в IE11, изучите это решение, чтобы решить все проблемы: http://stackoverflow.com/questions/27261346/custom-svg-markers-wont-display-in-ie-11 –

Просто примечание: если у вас есть анимация в вашем svg-файле, вам нужно добавить опцию optimize, установить значение false – Scalpweb

У меня была проблема с этим, но я посмотрел на ГСВ в редакторе кода и отсутствовала определенная ширина и высота.

Не работает

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

Работают ли

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" 
    width="33px" height="50px" 
    viewBox="0 0 419.5 595.3" 
    enable-background="new 0 0 419.5 595.3" 
    xml:space="preserve">

источник

2014-02-14 15:20:53 Thomas

Это вместе с ответом Yuval Adam работает лучше всего ... размер должен быть указан явно в SVG-файле, и 'google.maps.Size()' фактически определяет фактический размер отображения на карте. – mch

var marker = new google.maps.Marker({ 
     icon: { 
      size: new google.maps.Size(21, 45), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(21, 45), 
      url: `data:image/svg+xml;utf-8, 
         <svg width="21" height="45" viewBox="0 0 21 45" xmlns="http://www.w3.org/2000/svg"><title>POINT</title><desc>Created with Sketch.</desc><g transform="translate(-651 -1250) translate(651 1250)" fill="#F76A4C"><circle cx="10.5" cy="10.5" r="10.5"/><path d="M9 19h3v26h-3z"/></g></svg>` 
     } 
    });

Живой пример на codepen.

источник

2016-09-27 08:37:09

При обращении к внешнему SVG вам необходимо использовать scaledSize вместо size для значка. Смотрите фрагмент кода ниже ...

function initMap() { 
 
    var springfield = { 
 
    lat: 39.9354165, 
 
    lng: -83.8215624 
 
    }; 
 

 
    var homer = { 
 
    url: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg', 
 
    scaledSize: new google.maps.Size(64, 64), 
 
    origin: new google.maps.Point(0, 0), 
 
    anchor: new google.maps.Point(0, 32) 
 
    } 
 

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

 
    var marker = new google.maps.Marker({ 
 
    position: springfield, 
 
    map: map, 
 
    icon: homer, 
 
    draggable: true 
 
    }); 
 
}

#map { 
 
    height: 400px; 
 
    width: 100%; 
 
}

<script async defer src="//maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
<div id="map"></div>

источник

2017-02-28 06:17:28

Использовать SVG для маркера в Картах Google?

ответ

Смежные вопросы