Zmiana rozmiaru ikony znacznika Google Maps

Question

Po załadowaniu obrazu do właściwości ikony znacznika wyświetlany jest jego oryginalny rozmiar, który jest o wiele większy niż powinien być.

Chcę zmienić rozmiar na standard na mniejszy. Jaki jest najlepszy sposób na zrobienie tego?

Kod:

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

Answer 1

Jeśli oryginalny rozmiar to 100 x 100 i chcesz go skalować do 50 x 50, użyj scaledSize zamiast rozmiaru.

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

Answer 2

Jak wymieniono w komentarzach, to jest aktualizowana rozwiązanie na korzyść Ikona obiektu z dokumentacją.

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

Answer 3

MarkerImage has been deprecated for Icon

Do wersji 3.10 API Google Maps JavaScript, złożone ikony zostały zdefiniowane jako obiekty MarkerImage. Literał obiektu Icon został dodany w 3.10 i zastępuje MarkerImage od wersji 3.11. Ikona Literały obiektów obsługują te same parametry, co MarkerImage, umożliwiając łatwą konwersję MarkerImage na ikonę poprzez usunięcie konstruktora , zawijanie poprzednich parametrów w {} i dodawanie nazw poszczególnych parametrów z .

kod Phillippe byłby teraz:

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

Answer 4

kompletny początkujący jak ja w temacie może trudniej wdrożyć jeden z tych odpowiedzi niż, jeśli w zasięgu Twoich możliwości, aby zmienić rozmiar obrazu samodzielnie z edytora on-line lub Photo Editor jak Photoshop.

Obraz 500 x 500 będzie większy na mapie niż obraz 50 x 50.

Nie wymaga programowania.

Answer 5

Delete pochodzenie i kotwica będzie bardziej regularny obrazowi

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