web-dev-qa-db-fra.com

Modifier la taille du marqueur dans Google maps V3

J'utilise cette explication sur la façon de colorer un marqueur Google Maps en définissant l'icône à l'aide d'un MarkerImage , et la coloration fonctionne bien. Mais je ne peux pas faire en sorte 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 changer la taille du marqueur? Par exemple, comment puis-je doubler la taille du marqueur?

google-maps-api-3google-maps-markers
41
steampowered

Cette réponse expose sur réponse utile de John Black , je vais donc répéter une partie du contenu de sa réponse dans ma réponse.

Le moyen le plus simple de redimensionner un marqueur semble laisser les arguments 2, 3 et 4 nuls et mettre à l'échelle 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 définir la taille du marqueur dans le deuxième argument est préférable à la mise à l'échelle dans le cinquième argument. Je ne sais pas si c'est vrai.

Laisser les arguments 2 à 4 null fonctionne très bien pour l’image pin par défaut de Google, mais vous devez définir une ancre de manière explicite pour l’image ombre par défaut de Google pin, sinon cela ressemblera à ceci:

what happens when you leave anchor null on an enlarged shadow

Il se trouve que le centre du bas de l’image de broche est colloqué avec la pointe de la broche lorsque vous affichez le graphique sur la carte. Ceci est important car la propriété de position du marqueur (la position du marqueur LatLng sur la carte) sera automatiquement co-localisée avec la pointe visuelle de la broche lorsque vous quitterez l'ancre (4ème argument) null . En d’autres termes, laisser l’ancre à zéro garantit les pointes où elle est supposée pointer.

Cependant, la pointe de l'ombre n'est pas située en bas au centre. Vous devez donc définir explicitement le 4ème argument pour décaler l'extrémité de l'ombre d'épingle afin que son extrémité soit co-localisée avec celle de l'image d'épingle.

En expérimentant, j'ai trouvé que le bout de l'ombre devrait être réglé comme suit: x correspond à 1/3 de la taille et y à 100%.

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:

offset the enlarged shadow anchor explicitly

79
steampowered

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

new google.maps.Size(42,68)

Je trouve qu'il est plus facile de laisser l'API de carte comprendre les autres arguments, sauf si j'ai besoin d'autre chose que le bas/centre de l'image en tant qu'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)
);
24
John Black