Ridimensiona l'immagine dell'icona dell'indicatore di Google Maps


141

Quando carico un'immagine nella proprietà dell'icona di un marcatore, questa viene visualizzata con le sue dimensioni originali, che sono molto più grandi di quanto dovrebbero essere.

Voglio ridimensionare allo standard a una dimensione inferiore. Qual è il modo migliore per farlo?

Codice:

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}

Risposte:


317

Se la dimensione originale è 100 x 100 e si desidera ridimensionarla a 50 x 50, utilizzare ridimensionato anziché Dimensione.

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});

Ecco come farlo sotto API v3.
Dean_Wilson,

scaledSizeinvece di scale= amore
Made in Moon,

Assicurati di manipolare i punti di ancoraggio per allineare correttamente l'icona alla posizione.
Bluedot,

64

Come menzionato nei commenti, questa è la soluzione aggiornata a favore dell'oggetto Icon con documentazione.

Usa oggetto Icona

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

 posicion = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: posicion,
  map: map,
  icon: icon
 });

12
MarkerImage è obsoleto: usa invece l'oggetto icon!
Bertaud,

8
Questo non ridimensiona l'immagine, ma la ritaglia?
Luis A. Florit,

Uso icon objecte scaledSize: new google.maps.Size(h, w)proprietà su quell'oggetto
Sverrir Sigmundarson,

2
@SverrirSigmundarson new google.maps.Size(w, h)NON dovrebbe essere h, w
Ravi Ram

@RaviRam In effetti hai ragione , grazie per questa correzione.
Sverrir Sigmundarson,

14

MarkerImage è stato deprecato per Icon

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

Il codice di Phillippe ora sarebbe:

 var icon = {
     url: "../res/sit_marron.png", // url
     scaledSize: new google.maps.Size(width, height), // size
     origin: new google.maps.Point(0,0), // origin
     anchor: new google.maps.Point(anchor_left, anchor_top) // anchor 
 };

 position = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: position,
  map: map,
  icon: icon
 });

3
Penso che questo non ridimensiona l'immagine, ma la ritaglia.
Luis A. Florit,

9
Tu vuoi scaledSizepiuttosto che size.
bbodenmiller,

Sì, d'accordo con @bbodenmiller, scaledSize potrebbe essere quello che stai cercando. Per il mio progetto uso scaledSize e funziona per me. var icon = {url: imageName, scaledSize: new google.maps.Size (8, 12)};
user908645

7

Elimina origine e ancora saranno le immagini più regolari

  var icon = {
        url: "image path", // url
        scaledSize: new google.maps.Size(50, 50), // size
    };

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, long),
  map: map,
  icon: icon
 });

Questo ha funzionato per me! Se provassi a impostare il parametro scaledImage all'interno del codice Marker, non funzionerebbe.
Dumber_Texan2,

1

Un principiante completo come me sull'argomento potrebbe trovare più difficile implementare una di queste risposte piuttosto che, se sotto il tuo controllo, ridimensionare l'immagine tu stesso con un editor online o un editor di foto come Photoshop.

Un'immagine 500x500 apparirà più grande sulla mappa di un'immagine 50x50.

Nessuna programmazione richiesta.


1

Quindi ho avuto questo stesso problema, ma un po 'diverso. Avevo già l'icona come oggetto come suggerisce Philippe Boissonneault , ma stavo usando un'immagine SVG.

Quello che ho risolto per me è stato: passare
da un'immagine SVG a un PNG e seguire Catherine Nyo per avere un'immagine doppia rispetto a quella che userete.


0

Se stai usando vue2-google-maps come me, il codice per impostare le dimensioni è simile al seguente:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.