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"
});
}
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
});
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
});
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
});
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
});
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.
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.