29 votes

Modifier la taille du marqueur dans Google maps V3

Je suis à l'aide de cette explication de comment la couleur d'une carte google maps marqueur par réglage de l'icône à l'aide d'un MarkerImage, et la coloration fonctionne bien. Mais je ne peux pas faire la scaledSize argument de modifier 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);

Qu'est-ce que l'utilisation correcte de la scaledSize argument pour modifier la taille des marqueurs? Par exemple, comment puis-je double la taille des marqueurs?

58voto

steampowered Points 2179

Cette réponse expose sur Jean Noir est utile de répondre, alors je vais répéter un peu de sa réponse contenu dans ma réponse.

Le moyen le plus facile pour redimensionner un marqueur semble être de quitter l'argument 2, 3, et 4 nuls et de mise à l'échelle de la taille de l'argument de 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 aparté, cette réponse à une question similaire, affirme que la définition d'un marqueur de taille dans le 2ème argument est mieux que la mise à l'échelle dans le 5ème argument. Je ne sais pas si c'est vrai.

Laissant arguments 2-4 null fonctionne très bien pour le code pin par défaut de google image, mais vous devez définir un point d'ancrage explicitement pour le code pin par défaut de google image de l'ombre, ou il ressemblera à ceci:

what happens when you leave anchor null on an enlarged shadow

Le bas centre de la broche de l'image se trouve être jumelée avec la pointe de la broche lorsque vous affichez le graphique sur la carte. Ceci est important, parce que la position du marqueur de propriété (marqueur de l' LatLng position sur la carte) sera automatiquement regroupé avec le visuel de la pointe de la broche lorsque vous quittez l'ancre (4ème argument) null. En d'autres termes, en laissant le point d'ancrage null assure la pointe des points où il est censé point.

Cependant, l'extrémité de l'ombre n'est pas situé en bas au centre. Donc, vous devez définir le 4ème argument explicitement pour compenser la pointe de la broche de l'ombre si l'ombre de la pointe va être colocalisé avec le code pin de l'image de pointe.

Par l'expérimentation, j'ai trouvé l'astuce de l'ombre devrait être définie comme ceci: x est de 1/3 de la taille et de y est de 100% de 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:

offset the enlarged shadow anchor explicitly

13voto

John Black Points 396

Les arguments de taille sont en pixels. Ainsi, 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 carte comprendre 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)
);
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X