web-dev-qa-db-fra.com

Redimensionner l'icône de marqueur Google Maps image

Lorsque je charge une image dans la propriété icon d'un marqueur, celle-ci s'affiche avec sa taille d'origine, qui est bien plus grande qu'il 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"
  });
}
javascriptgoogle-mapsgoogle-maps-markersimage-resizing
109
Golan_trevize

Si le format d'origine est 100 x 100 et que vous souhaitez le redimensionner à 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
});
252
Catherine Nyo

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

Utiliser 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
 });
58
Philippe Boissonneault

MarkerImage est obsolète pour Icon

Jusqu'à la version 3.10 de l'API JavaScript de Google Maps, icônes complexes ont été définis en tant qu’objets MarkerImage. Le littéral objet Icon a été ajouté en 3.10 et remplace MarkerImage à partir de la version 3.11. Icône les littéraux d'objet prennent en charge les mêmes paramètres que MarkerImage, permettant à vous pouvez facilement convertir une MarkerImage en une icône en supprimant le constructeur, en enveloppant les paramètres précédents dans les {}, et en ajoutant le 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
 });
13
Jono

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

Il peut être plus difficile pour un sujet débutant comme moi d’implémenter l’une de ces réponses que, si vous en avez le contrôle, de redimensionner l’image vous-même avec un éditeur en ligne ou un éditeur de photo comme Photoshop. 

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

Aucune programmation requise.

1
bearacuda13

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

Ce qui l'a résolu pour moi était: 
Basculez d’une image SVG à une image PNG et suivez Catherine Nyo si vous avez une image dont la taille est le double de celle que vous utiliserez.

0
jumper