Как использовать маркеры SVG в API Карт Google v3

Могу ли я использовать преобразованный image.svg в качестве значка карты Google. Я преобразовал свой png-образ в svg, и я хочу использовать его как символ карты google, который можно повернуть. Я уже пытался использовать символ карты google, но я хочу иметь значок, такой как автомобиль, человек и т. Д. Вот почему я преобразовал свои png-файлы в svg, точно так же, как этот примерный сайт, что он использует для этих http: / /www.goprotravelling.com/

Вы можете отобразить значок с помощью нотации SVG Path .

Дополнительную информацию см. В документации Google .

Вот пример:

var icon = { path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", fillColor: '#FF0000', fillOpacity: .6, anchor: new google.maps.Point(0,0), strokeWeight: 0, scale: 1 } var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: false, icon: icon }); 

Ниже приведен рабочий пример того, как отображать и масштабировать значок SVG маркера:

Демо-версия JSFiddle

Редактировать:

Другой пример: сложный значок:

Демо-версия JSFiddle

Изменить 2:

И вот как вы можете иметь SVG-файл в качестве значка:

Демо-версия JSFiddle

Если вам нужен полный svg не только путь, и вы хотите его модифицировать на стороне клиента (например, изменить текст, скрыть подробности, …), вы можете использовать альтернативный URL-адрес данных с включенным svg:

 var svg = ''; icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg); 

JavaScript (Firefox) btoa () используется для получения кодировки base64 из текста SVG. Также вы можете использовать http://dopiaza.org/tools/datauri/index.php для создания базовых URL-адресов.

Вот полный пример jsfiddle :

        

Дополнительную информацию можно найти здесь .

Избегайте кодировки base64:

Чтобы избежать кодирования base64, вы можете заменить 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) с 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg)

Это должно работать с современными браузерами вплоть до IE9. Преимуществом является то, что encodeURIComponent является функцией js по умолчанию и доступен во всех современных браузерах. Вы также можете получить более мелкие ссылки, но вам нужно протестировать это и подумайте о том, чтобы использовать ' вместо " в вашем svg.

Также см. Раздел Оптимизация SVG в URI данных для получения дополнительной информации.

Поддержка IE: для поддержки SVG-маркеров в IE требуется две небольшие адаптации, как описано здесь: SVG Markers в IE . Я обновил код примера для поддержки IE.

Я знаю, что это сообщение немного устарело, но я видел так много плохой информации об этом в SO, чтобы я мог кричать. Поэтому я просто должен бросить свои два цента с совершенно другим подходом, который, как я знаю, работает, поскольку я надежно использовал его на многих картах. Кроме того, я считаю, что OP захотела также поворачивать маркер стрелки вокруг точки карты, что отличается от поворота значка вокруг собственной оси x, y, которая изменится там, где указатель стрелки указывает на карту.

Во-первых, помните, что мы играем с картами Google и SVG, поэтому мы должны учитывать то, как Google развертывает реализацию SVG для маркеров (или фактически символов). Google устанавливает привязку для изображения маркера SVG в 0,0, который НЕ является верхним левым углом SVG viewBox. Чтобы обойти это, вы должны нарисовать свой SVG-образ немного по-другому, чтобы дать Google то, что он хочет … да ответ в том, как вы на самом деле создаете путь SVG в редакторе SVG (Illustrator, Inkscape и т. Д.). .).

Первый шаг – избавиться от viewBox. Это можно сделать, установив viewBox в вашем XML на 0 … это правильно, всего один нуль вместо обычных четырех аргументов для viewBox. Это отключает окно просмотра (и да, это семантически правильно). Вероятно, вы заметите, что размер вашего изображения прыгает сразу же, когда вы это делаете, и это потому, что у svg больше нет базы (viewBox) для масштабирования изображения. Поэтому мы создаем эту ссылку напрямую, установив ширину и высоту фактического количества пикселей, которые вы хотите, чтобы ваше изображение было в редакторе XML вашего редактора SVG.

Установив ширину и высоту изображения svg в редакторе XML, вы создаете базовую линию для масштабирования изображения, и по умолчанию этот размер становится значением 1 для свойств шкалы маркера. Вы можете увидеть преимущество, которое это имеет для динамического масштабирования маркера.

Теперь, когда у вас есть размер изображения, переместите изображение до тех пор, пока часть изображения, которое вы хотите иметь в качестве якоря, не будет находиться за 0,0 координатами редактора svg. После того, как вы сделали эту копию, значение атрибута d пути svg. Вы заметите, около половины из числа отрицательна, что является результатом выравнивания вашей точки привязки для 0,0 изображений вместо Viewbox.

Используя эту технику, вы сможете правильно повернуть маркер, вокруг точки lat и lng на карте. Это единственный надежный способ привязать точку на марке svg, который вы хотите к лату и длинному местоположению маркера.

Я попытался сделать JSFiddle для этого , но есть некоторая ошибка в реализации, одна из причин, почему я не очень люблю переинтерпретированный код. Поэтому вместо этого я включил полностью автономный пример ниже, который вы можете попробовать, адаптировать и использовать в качестве ссылки. Это тот же код, который я пробовал в JSFiddle, который провалился, но он проплывает через Firebug без хныка.

        Create Draggable and Rotatable SVG Marker      
Enter heading to rotate marker     Heading°     Drag marker to place marker

Это именно то, что Google делает для своих нескольких символов, доступных в classе SYMBOL API Карт, поэтому, если это вас не убеждает … Во всяком случае, я надеюсь, что это поможет вам правильно составить и настроить маркер SVG для ваши карты Google endevours.

Да, вы можете использовать файл .svg для значка так же, как вы можете .png или другой формат файла изображения. Просто установите URL-адрес значка в каталог, в котором находится файл .svg. Например:

 var icon = { url: 'path/to/images/car.svg', size: new google.maps.Size(sizeX, sizeY), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(sizeX/2, sizeY/2) }; var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: false, icon: icon }); 

Все идет лучше, прямо сейчас вы можете использовать SVG-файлы.

  marker = new google.maps.Marker({ position: {lat: 36.720426, lng: -4.412573}, map: map, draggable: true, icon: "img/tree.svg" }); 

Как упоминалось другими в этом streamе, не забудьте явно задать атрибуты ширины и высоты в svg, например:

  

если вы не сделаете этого, то никакие манипуляции js не помогут вам, поскольку gmaps не будут иметь систему отсчета и всегда будут использовать стандартный размер.

(я знаю, что это было упомянуто в некоторых комментариях, но их легко пропустить. Эта информация помогла мне в разных случаях)

ОК! Я сделал это вскоре в своей сети, я пробую два способа создать пользовательский маркер карты Google, этот код запуска использует canvg.js, это лучшая совместимость для браузера. Код комментария не поддерживает IE11 в настоящее время.

 var marker; var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14]; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: { lat: 59.325, lng: 18.070 } }); var markerOption = { latitude: 59.327, longitude: 18.067, color: "#" + "000", text: "ha" }; marker = createMarker(markerOption); marker.setMap(map); marker.addListener('click', changeColorAndText); }; function changeColorAndText() { var iconTmpObj = createSvgIcon( "#c00", "ok" ); marker.setOptions( { icon: iconTmpObj } ); }; function createMarker(options) { //IE MarkerShape has problem var markerObj = new google.maps.Marker({ icon: createSvgIcon(options.color, options.text), position: { lat: parseFloat(options.latitude), lng: parseFloat(options.longitude) }, draggable: false, visible: true, zIndex: 10, shape: { coords: CustomShapeCoords, type: 'poly' } }); return markerObj; }; function createSvgIcon(color, text) { var div = $("
"); var svg = $( '' + '' + '' + '' + text + '' + '' ); div.append(svg); var dd = $(""); var svgHtml = div[0].innerHTML; canvg(dd[0], svgHtml); var imgSrc = dd[0].toDataURL("image/png"); //"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize //var svg = '' // + '' // + '' // + '' + text + '' // + ''; //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg); var iconObj = { size: new google.maps.Size(32, 43), url: imgSrc, scaledSize: new google.maps.Size(32, 43) }; return iconObj; };
     Your Custom Marker     

Вам необходимо пройти optimized: false .

Например

 var img = { url: 'img/puff.svg', scaledSide: new google.maps.Size(5, 5) }; new google.maps.Marker({position: this.mapOptions.center, map: this.map, icon: img, optimized: false,}); 

Без передачи optimized: false , мой svg появился как статическое изображение.

  • Импорт библиотеки google-play-service, показывающей красный X рядом с этим справочным андроидом
  • API Карт Google - Получить координаты адреса
  • API Карт Google V3: как показать направление от точки A до точки B (синяя линия)?
  • Как установить местоположение по умолчанию и уровень масштабирования для google map api v2?
  • Я пытаюсь найти поблизости такие места, как банки, рестораны, банкоматы внутри рисованной области на картах Google в андроиде
  • google map не отображается после публикации приложения для Android?
  • Как конвертировать из (x, y) экранных координат в LatLng (Google Maps)
  • Android Google Maps, как заставить каждый маркер InfoWindow открыть другую активность?
  • Как реализовать поиск в Google Maps по адресу в Android?
  • Показать текущее местоположение и соседние места и маршрут между двумя местами с помощью API Карт Google на Android
  • как иметь дело с google-картой внутри скрытого div (обновленное изображение)
  • Давайте будем гением компьютера.