webentwicklung-frage-antwort-db.com.de

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

Wenn ich ein Bild in die icon -Eigenschaft einer Markierung lade, wird diese mit der Originalgröße angezeigt, die viel größer ist, als sie sein sollte.

Ich möchte die Standardgröße 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"
  });
}
javascriptgoogle-mapsgoogle-maps-markersimage-resizing
109
Golan_trevize

Wenn das Originalformat 100 x 100 ist und Sie es 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
});
252
Catherine Nyo

Wie in Kommentaren erwähnt, ist dies die aktualisierte Lösung zugunsten des Icon-Objekts mit Dokumentation.

Icon-Objekt verwenden

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

Bis zur Version 3.10 der Google Maps JavaScript API werden komplexe Symbole wurden als MarkerImage-Objekte definiert. Das Icon-Objektliteral wurde hinzugefügt in 3.10 und ersetzt MarkerImage ab Version 3.11. Symbol Objektliterale unterstützen dieselben Parameter wie MarkerImage, sodass Sie können ein MarkerImage ganz einfach in ein Symbol konvertieren, indem Sie .__ entfernen. Konstruktor, der die vorherigen Parameter in {} 's umschließt und .__ hinzufügt. Namen jedes Parameters.

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

Ursprung und Anker löschen ist ein normaleres Bild

  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

Für einen Anfänger wie mich ist es möglicherweise schwieriger, eine dieser Antworten zu implementieren, als wenn Sie die Bildgröße mit einem Online-Editor oder einem Bildbearbeitungsprogramm wie Photoshopselbst anpassen.

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

Keine Programmierung erforderlich.

1
bearacuda13

Also hatte ich gerade das gleiche Problem, aber ein bisschen anders. Ich hatte die Ikone bereits als Objekt, wie Philippe Boissonneault vorschlägt, aber ich verwendete ein SVG-Bild. 

Was für mich gelöst wurde war: 
Wechseln Sie von einem SVG-Bild zu einem PNG-Bild und folgen Sie Catherine Nyo mit einem Bild, das doppelt so groß ist wie das, was Sie benötigen.

0
jumper