Zmień rozmiar obrazu ikony znacznika Map Google

141

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"
  });
}
Golan_trevize
źródło

Odpowiedzi:

317

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
});
Catherine Nyo
źródło
Oto jak to zrobić w API v3.
Dean_Wilson
scaledSizezamiast scale= love
Made in Moon
Pamiętaj, aby obracać punktami zakotwiczenia, aby prawidłowo wyrównać ikonę z lokalizacją.
bluedot
64

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
 });
Philippe Boissonneault
źródło
12
MarkerImage jest przestarzały: zamiast tego użyj obiektu icon!
Bertaud
8
To nie zmienia rozmiaru obrazu, ale przycina go?
Luis A. Florit
Użytkowanie icon objecti scaledSize: new google.maps.Size(h, w)własność tego obiektu
Sverrir Sigmundarson
2
@SverrirSigmundarson nie powinno być new google.maps.Size(w, h)h, w
Ravi Ram
@RaviRam Rzeczywiście masz rację , dziękuję za tę korektę.
Sverrir Sigmundarson
14

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
 });
Jono
źródło
3
Myślę, że to nie zmienia rozmiaru obrazu, ale przycina go.
Luis A. Florit
9
Chcesz scaledSizeraczej niż size.
bbodenmiller
Zgadzam się z @bbodenmiller, scaledSize może być tym, którego szukasz. W moim projekcie używam scaledSize i to działa dla mnie. var icon = {url: imageName, scaledSize: new google.maps.Size (8, 12)};
user908645
7

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
 });
İbrahim YANIK
źródło
To zadziałało dla mnie! Gdybym próbował ustawić parametr scaledImage w kodzie Markera, to nie zadziałałoby.
Dumber_Texan2
1

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.

bearacuda13
źródło
1

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ć.

skoczek
źródło
0

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 },
  }"
>
Wolle
źródło