Come utilizzare i marcatori SVG nell’API di Google Maps v3

Posso usare il mio image.svg convertito come icona di google map. Stavo convertendo la mia immagine png in SVG e voglio usare questo come il simbolo della mappa di google che può essere ruotato. Ho già provato a usare il simbolo google map ma voglio avere un’icona come car, man, ecc … Ecco perché ho convertito i miei file png in svg, proprio come questo sito di esempio che cosa usa per questi http: / /www.goprotravelling.com/

Puoi rendere l’icona usando la notazione SVG Path .

Vedi la documentazione di Google per ulteriori informazioni.

Ecco un esempio di base:

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 }); 

Ecco un esempio funzionante su come visualizzare e scalare un’icona SVG di un marker:

Demo JSFiddle

Modificare:

Un altro esempio qui con un’icona complessa:

Demo JSFiddle

Modifica 2:

Ed ecco come puoi avere un file SVG come un’icona:

Demo JSFiddle

Se hai bisogno di un svg completo non solo di un percorso e vuoi che sia modificabile sul lato client (ad esempio cambia il testo, nascondi i dettagli, …) puoi utilizzare un ‘URL’ di dati alternativi con svg incluso:

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

JavaScript (Firefox) btoa () è usato per ottenere la codifica base64 dal testo SVG. Puoi anche usare http://dopiaza.org/tools/datauri/index.php per generare URL di dati di base.

Ecco un esempio completo di jsfiddle :

        

Ulteriori informazioni possono essere trovate qui .

Evita la codifica base64:

Per evitare la codifica base64 puoi sostituire 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) con 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg)

Questo dovrebbe funzionare con i browser moderni fino a IE9. Il vantaggio è che encodeURIComponent è una funzione js predefinita e disponibile in tutti i browser moderni. Potresti anche ottenere link più piccoli ma devi testarlo e prendere in considerazione l’uso di ' invece di " nel tuo svg.

Vedi anche Ottimizzazione degli SVG negli URI di dati per ulteriori informazioni.

Supporto IE: per supportare i marcatori SVG in IE sono necessari due piccoli adattamenti come descritto qui: Marcatori SVG in IE . Ho aggiornato il codice di esempio per supportare IE.

So che questo post è un po ‘vecchio, ma ho visto così tante cattive informazioni su questo in SO da poter urlare. Quindi devo solo lanciare i miei due cent in un approccio completamente diverso che so funziona, dato che lo uso in modo affidabile su molte mappe. Oltre a ciò, credo che l’OP volesse la possibilità di ruotare anche il marker della freccia attorno al punto della mappa, che è diverso rispetto alla rotazione dell’icona attorno al proprio asse x, y che cambierà dove l’indicatore della freccia punta sulla mappa.

Innanzitutto, ricorda che stiamo giocando con le mappe di Google e SVG, quindi dobbiamo comprendere il modo in cui Google distribuisce l’implementazione di SVG per i marcatori (o in realtà simboli). Google imposta l’ancoraggio per l’immagine del marker SVG a 0,0 che NON è l’angolo in alto a sinistra del ViewBox SVG. Per aggirare questo problema, devi disegnare l’immagine SVG in un modo leggermente diverso per dare a Google quello che vuole … sì, la risposta è nel modo in cui crei effettivamente il percorso SVG nel tuo editor SVG (Illustrator, Inkscape, ecc. .).

Il primo passo è quello di eliminare il viewBox. Questo può essere fatto impostando il ViewBox nel tuo XML a 0 … giusto, solo uno zero invece dei soliti quattro argomenti per il ViewBox. Questo spegne il riquadro di visualizzazione (e sì, questo è semanticamente corretto). Probabilmente noterai che la dimensione della tua immagine salta immisamente quando lo fai, e questo perché la svg non ha più una base (il viewBox) per ridimensionare l’immagine. Quindi creiamo tale riferimento direttamente, impostando la larghezza e l’altezza sul numero effettivo di pixel che desideri che l’immagine sia nell’editor XML del tuo editor SVG.

Impostando la larghezza e l’altezza dell’immagine svg nell’editor XML si crea una linea di base per il ridimensionamento dell’immagine e questa dimensione diventa il valore 1 per le proprietà della scala del marcatore per impostazione predefinita. Puoi vedere il vantaggio che questo ha per il ridimensionamento dinamico dell’indicatore.

Ora che hai la dimensione dell’immagine, sposta l’immagine fino a quando la parte dell’immagine che desideri avere come ancoraggio si trova sopra le coordinate 0,0 dell’editor svg. Una volta eseguita questa copia, il valore dell’attributo d del percorso svg. Noterai che circa la metà dei numeri è negativa, il che è il risultato dell’allineamento del punto di ancoraggio per il valore 0,0 dell’immagine anziché del viewBox.

L’utilizzo di questa tecnica ti consentirà di ruotare il marker correttamente, attorno al punto lat e lng sulla mappa. Questo è l’unico modo affidabile per bind il punto sul marcatore svg che vuoi al lat e lungo della posizione del marker.

Ho provato a creare un JSFiddle per questo , ma ci sono alcuni errori nell’implementazione, uno dei motivi per cui non amo tanto il codice reinterpretato. Così, invece, ho incluso un esempio completamente autonomo sotto che puoi provare, adattare e usare come riferimento. Questo è lo stesso codice che ho provato a JSFiddle e che ha fallito, ma naviga attraverso Firebug senza un gemito.

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

Questo è esattamente ciò che fa Google per i suoi pochi simboli disponibili nella class SYMBOL dell’API di Maps, quindi se ciò non ti convince … Comunque, spero che questo ti aiuterà a creare e impostare correttamente un marker SVG per le tue mappe di Google sono esaurite.

Sì, puoi usare un file .svg per l’icona proprio come puoi .png o un altro formato di file immagine. Basta impostare l’url dell’icona nella directory in cui si trova il file .svg. Per esempio:

 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 }); 

Le cose stanno andando meglio, adesso puoi usare i file SVG.

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

Come menzionato da altri in questa discussione, non dimenticare di impostare esplicitamente gli attributi width e height nella svg in questo modo:

  

se non lo fai, nessuna manipolazione di js può aiutarti perché gmaps non avrà una cornice di riferimento e userà sempre una dimensione standard.

(So ​​che è stato menzionato in alcuni commenti, ma sono facili da perdere.Queste informazioni mi hanno aiutato in vari casi)

OK! L’ho fatto presto nel mio sito web, ho provato due modi per creare l’indicatore personalizzato google map, questo codice utilizza canvg.js è la migliore compatibilità per browser. Il codice commentato non supporta IE11 in modo permanente.

 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     

Devi passare optimized: false .

Per esempio

 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,}); 

Senza passare optimized: false , il mio svg è apparso come un’immagine statica.