Ändern Sie die Größe des Google Maps-Markierungssymbols

Wenn ich ein Bild in die Symboleigenschaft eines Markers lade, wird es in seiner Originalgröße angezeigt, die viel größer ist, als es sein sollte.

Ich möchte die Größe des Standards auf eine kleinere Größe ändern. Was ist der beste Weg, dies zu tun?

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

Wenn die ursprüngliche Größe 100 x 100 ist und Sie sie auf 50 x 50 skalieren möchten, verwenden Sie scaledSize anstelle von 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
});

Wie in den Kommentaren erwähnt, ist dies die aktualisierte Lösung zugunsten des Symbolobjekts mit Dokumentation.

Verwenden Sie das Symbolobjekt

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 ist für Icon veraltet

Bis zur Version 3.10 der Google Maps JavaScript-API wurden komplexe Symbole als MarkerImage-Objekte definiert. Das Icon-Objektliteral wurde in 3.10 hinzugefügt und ersetzt MarkerImage ab Version 3.11. Symbolobjektliterale unterstützen dieselben Parameter wie MarkerImage, sodass Sie ein MarkerImage einfach in ein Symbol konvertieren können, indem Sie den Konstruktor entfernen, die vorherigen Parameter in {} einschließen und die Namen der einzelnen Parameter hinzufügen.

Phillippes Code wäre jetzt:

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

Ursprung und Anker löschen werden regelmäßiger

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

Ein Anfänger wie ich kann es möglicherweise schwieriger finden, eine dieser Antworten zu implementieren, als die Größe des Bildes selbst mit einem Online-Editor oder einem Fotoeditor wie Photoshop zu ändern .

Ein 500x500-Bild wird auf der Karte größer angezeigt als ein 50x50-Bild.

Keine Programmierung erforderlich.

Ich hatte also nur das gleiche Problem, aber ein bisschen anders. Ich hatte das Symbol bereits als Objekt, wie Philippe Boissonneault vorschlägt, aber ich habe ein SVG-Bild verwendet.

Was es für mich gelöst hat, war:
Wechseln Sie von einem SVG-Bild zu einem PNG und folgen Sie Catherine Nyo , um ein Bild zu erhalten, das doppelt so groß ist wie das, was Sie verwenden werden.

Wenn Sie wie ich vue2-google-maps verwenden, sieht der Code zum Festlegen der Größe folgendermaßen aus:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>