Redimensionner l'image de l'icône du marqueur Google Maps

141

Lorsque je charge une image dans la propriété icon d'un marqueur, elle s'affiche avec sa taille d'origine, qui est beaucoup plus grande qu'elle ne devrait l'être.

Je veux redimensionner à la norme à une taille plus petite. Quelle est la meilleure façon de procéder?

Code:

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

Réponses:

317

Si le format d'origine est de 100 x 100 et que vous souhaitez le mettre à l'échelle à 50 x 50, utilisez scaledSize au lieu de Size.

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
});
Catherine Nyo
la source
Voici comment procéder sous API v3.
Dean_Wilson
scaledSizeau lieu de scale= love
Made in Moon
Assurez-vous de jouer avec les points d'ancrage pour aligner correctement l'icône sur l'emplacement.
bluedot
64

Comme mentionné dans les commentaires, c'est la solution mise à jour en faveur de l'objet Icon avec documentation.

Utiliser l' objet Icon

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
 });
Philippe Boissonneault
la source
12
MarkerImage est obsolète: utilisez plutôt l'objet icon!
Bertaud
8
Cela ne redimensionne pas l'image, mais la recadre?
Luis A. Florit
Utilisation icon objectet scaledSize: new google.maps.Size(h, w)propriété de cet objet
Sverrir Sigmundarson
2
@SverrirSigmundarson ça ne devrait new google.maps.Size(w, h)PAS être h, w
Ravi Ram
@RaviRam En effet vous avez raison , merci pour cette correction.
Sverrir Sigmundarson
14

MarkerImage est obsolète pour Icon

Jusqu'à la version 3.10 de l'API JavaScript de Google Maps, les icônes complexes étaient définies comme des objets MarkerImage. Le littéral d'objet Icon a été ajouté dans la version 3.10 et remplace MarkerImage à partir de la version 3.11. Les littéraux d'objets Icon prennent en charge les mêmes paramètres que MarkerImage, ce qui vous permet de convertir facilement une MarkerImage en Icon en supprimant le constructeur, en enveloppant les paramètres précédents dans {} et en ajoutant les noms de chaque paramètre.

Le code de Phillippe serait maintenant:

 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
 });
Jono
la source
3
Je pense que cela ne redimensionne pas l'image, mais la recadre.
Luis A. Florit
9
Vous voulez scaledSizeplutôt que size.
bbodenmiller
Ouais d'accord avec @bbodenmiller, scaledSize est peut-être celui que vous recherchez. Pour mon projet, j'utilise scaledSize et cela fonctionne pour moi. var icon = {url: imageName, scaledSize: new google.maps.Size (8, 12)};
user908645
7

Supprimer l'origine et l'ancre sera une image plus régulière

  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
 });
İbrahim YANIK
la source
Cela a fonctionné pour moi! Si j'essayais de définir le paramètre scaledImage dans le code Marker, cela ne fonctionnerait pas.
Dumber_Texan2
1

Un débutant complet comme moi sur le sujet peut avoir plus de mal à mettre en œuvre l'une de ces réponses que, si vous le contrôlez, de redimensionner l'image vous-même avec un éditeur en ligne ou un éditeur de photos comme Photoshop.

Une image 500x500 apparaîtra plus grande sur la carte qu'une image 50x50.

Aucune programmation requise.

bearacuda13
la source
1

Donc j'ai juste eu ce même problème, mais un peu différent. J'avais déjà l'icône comme objet comme le suggère Philippe Boissonneault , mais j'utilisais une image SVG.

Ce qui a résolu le problème pour moi, c'est:
passer d'une image SVG à une image PNG et suivre Catherine Nyo pour avoir une image double de celle que vous utiliserez.

sauteur
la source
0

Si vous utilisez vue2-google-maps comme moi, le code pour définir la taille ressemble à ceci:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
Wolle
la source