ridimensiona icona svg per google map marker

Question

Sto avendo problemi con il ridimensionamento delle icone in google map. Ho un file SVG per renderlo reattivo.

questo è il modo che io chiamo il file in formato SVG

MyGreenSVG = { 
    url: 'greenFill.svg', 
    size: new google.maps.Size(20, 35) 
}; 

la proprietà: dimensioni non cambia la dimensione della mia icona, ma solo ritagliarla. l'unico modo è quello di cambiare la larghezza e l'altezza nel mio file SVG, e fare 2 versioni di esso. così perdo l'interesse di utilizzare svg ...

Questa è un'anteprima della mia svg lima:

<svg version="1.1" 
x="0px" y="0px" width="41.8px" height="74px" viewBox="0 0 41.8 74" enable-background="new 0 0 41.8 74" xml:space="preserve"> 

Answer 1

ha avuto lo stesso problema, è risolto utilizzando la scala:

MyGreenSVG = { 
    url: 'greenFill.svg', 
    scale: 0.5 
}; 

La parte strana è che trascorro un'ora ieri cercando di farlo funzionare e non è successo, oggi ho cambiato il numero da 0,3 a 0,2 e ha funzionato perfettamente. quindi fai attenzione con la cache e tutto il resto.

Answer 2

Non riesco a ridimensionare utilizzando scale. Ho trovato che se uso uno MarkerImage allora posso scalare lo svg e sembra abbastanza buono, molto meglio di un png per quanto è scorrevole. Non penso che sia più un 'simbolo' se sto usando MarkerImage.

function initialize() { 
    var mapOptions = { 
    zoom: 4, 
    center: new google.maps.LatLng(-25.363882, 131.044922) 
    }; 

var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: new google.maps.MarkerImage('icons/myIcon.svg', 
    null, null, null, new google.maps.Size(200,200)), 
    draggable: false, 
    map: map 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Sto ancora cercando una soluzione migliore.

AGGIORNAMENTO (04/14/2015)

Ho trovato questo sulla documentazione in fondo complex icons e appena sopra il link per symbols:

Conversione degli oggetti MarkerImage digitare Icona

Fino alla versione 3.10 dell'API JavaScript di Google Maps, le icone complesse erano definite come oggetti MarkerImage. L'oggetto letterale Icon è stato aggiunto nella versione 3.10 e sostituisce MarkerImage dalla versione 3.11 in poi. I letterali degli oggetti icona supportano gli stessi parametri di MarkerImage, consentendo di convertire facilmente un MarkerImage in un'icona rimuovendo il costruttore, inserendo i parametri precedenti in {} e aggiungendo i nomi di ciascun parametro. Per esempio:

var image = new google.maps.MarkerImage(
    place.icon, 
    new google.maps.Size(71, 71), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(17, 34), 
    new google.maps.Size(25, 25)); 

diventa

var image = { 
    url: place.icon, 
    size: new google.maps.Size(71, 71), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(17, 34), 
    scaledSize: new google.maps.Size(25, 25) 
}; 

stavo giocando in giro con il size e scaledSize e hanno an example here. Sembra che posso commentare il size e scaledSize funziona bene. Se size è inferiore a scaledSize, la grafica viene tagliata.

Answer 3

Ecco una soluzione su marcatori di scala in base alla zoom

var someMarker; 
    var title = "Some title"; 

    // A SVG flag marker 
    someMarker = new google.maps.Marker({ 
     position: latlon, 
     map: map, 
     icon: { 
      path: 'M0 -36 L0 -20 24 -20 24 -36 M0 -36 L0 0 1 0 1 -20z', // SVG for flag 
      scale: 1.0, 
      fillColor: "#E6BD00", 
      fillOpacity: 0.8, 
      strokeWeight: 0.3, 
      anchor: new google.maps.Point(0, 0), 
      rotation: 0 
     }, 
     title:title 
    }); 

    // scale marker on different zooms 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     var zoom = map.getZoom(); 
     var picon = someMarker.getIcon(); 

     if(zoom >=16 && zoom <= 17 && picon.scale != 0.6) 
     { picon.scale=0.6; 
     someMarker.setOptions({icon:picon}); 
     } 
     else if(zoom == 18 && picon.scale != 0.8) 
     { 
     picon.scale=0.8; 
     someMarker.setOptions({icon:picon}); 
     } 
     else if(zoom > 18 && picon.scale != 2.0) 
     { 
     picon.scale=2.0; 
     someMarker.setOptions({icon:picon}); 
     } 
    }); 

Answer 4

Come Kaplan ha sottolineato, è possibile ridimensionare i marcatori SVG con size e scaledSize.Nel mio caso, il risultato era ancora buggato: alcune istanze della stessa icona venivano visualizzate correttamente, altre lasciavano strani artefatti sulla mappa.

Ho risolto questo problema in un modo molto semplice: ho definito width e height nell'elemento <svg>.

Answer 5

So che questo è un vecchio post, quindi solo un aggiornamento da parte mia.

Questo funziona per me senza utilizzare MarkerImage, ma è imperativo che lo svg abbia le sue proprietà width e height impostate.

E è necessario utilizzare la proprietà icona "scaledSize" per impostare la dimensione dell'icona sulla mappa