Zmień rozmiar obrazu ikony znacznika Map Google

Kiedy ładuję obraz do właściwości icon znacznika, wyświetla się on w swoim oryginalnym rozmiarze, który jest znacznie większy niż powinien.

Chcę zmienić rozmiar do standardowego na mniejszy rozmiar. Jaki jest najlepszy sposób, aby to zrobić?

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

Jeśli oryginalny rozmiar to 100 x 100 i chcesz go przeskalować do 50 x 50, użyj scaledSize zamiast 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
});

Jak wspomniano w komentarzach, jest to zaktualizowane rozwiązanie na korzyść obiektu Icon z dokumentacją.

Użyj obiektu Icon

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 został wycofany dla Icon

Do wersji 3.10 interfejsu API JavaScript Map Google złożone ikony były definiowane jako obiekty MarkerImage. Literał obiektu Icon został dodany w 3.10 i zastępuje MarkerImage od wersji 3.11. Literały obiektów Icon obsługują te same parametry, co MarkerImage, umożliwiając łatwe przekonwertowanie MarkerImage na Icon przez usunięcie konstruktora, zawijanie poprzednich parametrów w {} i dodanie nazw każdego parametru.

Kod Phillippe'a wyglądał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
 });

Usuń początek i kotwicę będzie bardziej regularnym obrazem

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

Zupełnie początkującym, takim jak ja, może być trudniej wdrożyć jedną z tych odpowiedzi niż, jeśli masz kontrolę, samemu zmienić rozmiar obrazu za pomocą edytora online lub edytora zdjęć, takiego jak Photoshop.

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

Nie wymaga programowania.

Więc miałem ten sam problem, ale trochę inny. Miałem już ikonę jako obiekt, jak sugeruje Philippe Boissonneault , ale używałem obrazu SVG.

Rozwiązanie dla mnie to:
Przełącz się z obrazu SVG na PNG i podążając za Catherine Nyo, aby uzyskać obraz, który jest dwukrotnie większy niż ten, którego będziesz używać.

Jeśli używasz map vue2-google-maps jak ja, kod do ustawienia rozmiaru wygląda następująco:

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