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

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

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

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

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

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

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.

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.

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 },
  }"
>