2013-02-26 26 views
78

Wenn ich ein Bild in das Symbol Eigenschaft eines Markers laden zeigt sie mit ihrer ursprünglichen Größe, die viel größer als es ist sein sollte.Resize Google Maps Marker Symbolbild

Ich möchte auf eine kleinere Größe der Norm ä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" 
    }); 
} 

Antwort

169

Wenn die ursprüngliche Größe 100 x 100 ist und Sie wollen es skalieren bis 50 x 50, verwenden scaledSize statt Größe.

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

+1, das hat bei mir funktioniert. – elrobis

+0

So wird es unter API v3 gemacht. –

+1

Es funktioniert, aber auf diese Weise verlieren Sie Proportionen über Bild. –

55

Wie in den Kommentaren erwähnt, ist dies die aktualisierte Lösung für Icon-Objekt mit Dokumentation.

Verwenden Icon object

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

Thanks man! geschätzt –

+11

MarkerImage ist veraltet: Verwenden Sie stattdessen das Symbolobjekt! – Bertaud

+8

Das Bild wird nicht verkleinert, aber zugeschnitten? –

12

MarkerImage has been deprecated for Icon

Bis zur Version 3.10 des Google Maps JavaScript API, komplexe Symbole als Markerimage Objekte definiert wurden. Das Icon-Objektliteral wurde in 3.10 um ergänzt und ersetzt MarkerImage ab Version 3.11. Symbol Objektliterale unterstützen die gleichen Parameter wie MarkerImage, so dass Sie einfach ein MarkerImage in ein Symbol konvertieren können, indem Sie den Konstruktor entfernen, die vorherigen Parameter in {} 's einfügen und die Namen jedes Parameters hinzufügen.

Phillipe der 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 
}); 
+3

Ich glaube, das verkleinert das Bild nicht, sondern schneidet es ab. –

+9

Sie möchten 'skalierteSize' statt' size'. – bbodenmiller

+0

Ja, stimme mit @bbodenmiller zu, skalierte Größe könnte die sein, nach der du suchst. Für mein Projekt verwende ich skalierte Größe und das funktioniert für mich. var icon = {url: imageName, skalierte Größe: new google.maps.Size (8, 12)}; – user908645

1

Ein Anfänger wie ich zu dem Thema findet es schwieriger, eine dieser Antworten zu implementieren als, wenn in Ihrer Kontrolle, zu das Größe des Bildes selbst mit einem Online-Editor oder einem Foto-Editor wie Photoshop.

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

Keine Programmierung erforderlich.

0

löschen Herkunft und Anker wird mäßigere Bild sein

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