Modifier la taille du marqueur dans Google maps V3

J’utilise cette explication pour colorer un marqueur Google Maps en définissant l’icône à l’aide de MarkerImage , et la coloration fonctionne bien. Mais je ne peux pas faire que l’argument scaledSize modifie la taille du marqueur.

var pinColor = 'FFFF00'; var pinIcon = new google.maps.MarkerImage( "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34), new google.maps.Size(2, 4)); marker.setIcon(pinIcon); 

Quelle est l’utilisation correcte de l’argument scaledSize pour modifier la taille du marqueur? Par exemple, comment puis-je doubler la taille du marqueur?

Cette réponse explique la réponse utile de John Black , alors je vais répéter certaines de ses réponses dans ma réponse.

Le moyen le plus simple de redimensionner un marqueur semble être de laisser les arguments 2, 3 et 4 nuls et de redimensionner la taille de l’argument 5.

 var pinIcon = new google.maps.MarkerImage( "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00", null, /* size is determined at runtime */ null, /* origin is 0,0 */ null, /* anchor is bottom center of the scaled image */ new google.maps.Size(42, 68) ); 

En passant, cette réponse à une question similaire affirme que la définition de la taille du marqueur dans le deuxième argument est préférable à celle du cinquième argument. Je ne sais pas si c’est vrai.

Laisser des arguments 2-4 null fonctionne parfaitement pour l’image pin google par défaut, mais vous devez définir une ancre explicitement pour l’image shadow google pin par défaut, ou cela ressemblera à ceci:

que se passe-t-il lorsque vous laissez une ancre nulle sur une ombre agrandie

Lorsque vous affichez le graphique sur la carte, il se trouve que le centre inférieur de l’image de la broche est colocalisé avec la pointe de la broche. Ceci est important, car la propriété de position du marqueur (position LatLng du marqueur sur la carte) sera automatiquement co-implantée avec la pointe visuelle de la broche lorsque vous quitterez l’ancre (4ème argument) null . En d’autres termes, laisser la valeur NULL d’ancrage garantit les points de repère où elle est supposée pointer.

Cependant, la pointe de l’ombre n’est pas située au centre inférieur. Donc, vous devez définir le 4ème argument explicitement pour décaler la pointe de l’ombre de la broche afin que la pointe de l’ombre soit associée à la pointe de l’image de la broche.

En expérimentant, j’ai trouvé que la pointe de l’ombre devrait être définie comme suit: x est 1/3 de la taille et y est 100% de la taille.

 var pinShadow = new google.maps.MarkerImage( "http://chart.apis.google.com/chart?chst=d_map_pin_shadow", null, null, /* Offset x axis 33% of overall size, Offset y axis 100% of overall size */ new google.maps.Point(40, 110), new google.maps.Size(120, 110)); 

pour donner ceci:

décaler explicitement l'ancre d'ombre agrandie

Les arguments de taille sont en pixels. Donc, pour doubler la taille du marqueur de votre exemple, le cinquième argument du constructeur MarkerImage serait:

 new google.maps.Size(42,68) 

Je trouve plus facile de laisser l’API de la carte identifier les autres arguments, sauf si j’ai besoin d’autre chose que le bas / centre de l’image comme ancre. Dans votre cas, vous pourriez faire:

 var pinIcon = new google.maps.MarkerImage( "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, null, /* size is determined at runtime */ null, /* origin is 0,0 */ null, /* anchor is bottom center of the scaled image */ new google.maps.Size(42, 68) );