web-dev-qa-db-fra.com

Comment aligner l'icône d'un marqueur dans google map

Dans google map, le centre inférieur de l'image du marqueur est généralement le dernier point qu'il doit marquer.

Imaginez que mon icône de marqueur soit un cercle, je voudrais que le centre soit au lat-lng du point donné ...

Code:

var image_hotspot = 'img/icons/bank_euro.png';
var marker = new google.maps.Marker({
      map: map,
      position: placeLoc,
      icon: image_hotspot
    });
javascriptgoogle-mapsgoogle-maps-markers
33
illinois

Vous avez besoin de créer un objet MarkerImage, par exemple:

var markerImage = new google.maps.MarkerImage('img/icons/bank_euro.png',
                new google.maps.Size(30, 30),
                new google.maps.Point(0, 0),
                new google.maps.Point(15, 15));

Lorsque le premier paramètre est une URL d'image, le deuxième est la taille de l'image, le troisième est le point d'origine de l'image et le quatrième est la position sur l'image vers laquelle le marqueur doit pointer. Si votre marqueur est un cercle, réglez le quatrième paramètre au centre de l'image. Et créez votre marqueur en passant markerImage à la propriété icon:

var marker = new google.maps.Marker({
  map: map,
  position: placeLoc,
  icon: markerImage
});
35
WojtekT

De la documentation:

Conversion d'objets MarkerImage en type Icon 

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

devient

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  Origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

https://developers.google.com/maps/documentation/javascript/markers

9
Sabino Velasquez

Avec la version 3 de Google Maps, vous pourriez/devriez utiliser:

new maps.Marker({
            ...
            icon: {
                url: '.../myimage.png',
                scaledSize: new maps.Size(60, 30),
                anchor: new maps.Point(30, 30),
            },
        });

https://developers.google.com/maps/documentation/javascript/reference#Icon

6
velop

Si vous utilisez addMarker et devez définir les coordonnées x, y à l'aide de Point (x, y)

let markerInstance = mapInstance.addMarker({
            lat : _lat,
            lng : _lng,
            label: '8',
            icon : {
              url :  'url_image.png',
              Origin:  new google.maps.Point(0, 0),
            }
        });
0
wilfredonoyola