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

141

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

Antworten:

317

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
});
Catherine Nyo
quelle
So geht's unter API v3.
Dean_Wilson
scaledSizestatt scale= Liebe
Made in Moon
Stellen Sie sicher, dass Sie mit den Ankerpunkten drehen, um das Symbol korrekt an der Position auszurichten.
Bluedot
64

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
 });
Philippe Boissonneault
quelle
12
MarkerImage ist veraltet: Verwenden Sie stattdessen das Symbolobjekt!
Bertaud
8
Dadurch wird die Größe des Bilds nicht geändert, sondern beschnitten?
Luis A. Florit
Verwendung icon objectund die scaledSize: new google.maps.Size(h, w)Eigenschaft auf diesem Objekt
Sverrir Sigmundarson
2
@SverrirSigmundarson es sollte new google.maps.Size(w, h)NICHT h sein, w
Ravi Ram
@ RaviRam In der Tat haben Sie Recht , danke für diese Korrektur.
Sverrir Sigmundarson
14

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
 });
Jono
quelle
3
Ich denke, dies ändert die Größe des Bildes nicht, sondern beschneidet es.
Luis A. Florit
9
Du willst scaledSizelieber als size.
bbodenmiller
Ja, stimme @bbodenmiller zu, scaledSize könnte das sein, wonach du suchst. Für mein Projekt verwende ich scaledSize und das funktioniert bei mir. var icon = {url: imageName, scaledSize: new google.maps.Size (8, 12)};
user908645
7

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
 });
İbrahim YANIK
quelle
Das hat bei mir funktioniert! Wenn ich versuchen würde, den Parameter scaledImage im Marker-Code festzulegen, würde dies nicht funktionieren.
Dumber_Texan2
1

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.

bearacuda13
quelle
1

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.

Jumper
quelle
0

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 },
  }"
>
Wolle
quelle