Redimensionar imagem do ícone do marcador do Google Maps


141

Quando carrego uma imagem na propriedade icon de um marcador, ela é exibida com seu tamanho original, que é muito maior do que deveria.

Quero redimensionar para o padrão para um tamanho menor. Qual é a melhor maneira de fazer isso?

Código:

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

Respostas:


317

Se o tamanho original for 100 x 100 e você quiser dimensioná-lo para 50 x 50, use scaledSize em vez de 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
});

É assim que se faz na API v3.
Dean_Wilson

scaledSizeem vez de scale= amor
Feito na lua

Certifique-se de mexer nos pontos de ancoragem para alinhar corretamente o ícone ao local.
Blueot28

64

Como mencionado nos comentários, esta é a solução atualizada em favor do objeto Icon com documentação.

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

12
MarkerImage está obsoleta: use o objeto icon!
Bertaud

8
Isso não redimensiona a imagem, mas a corta?
Luis A. Florit

Use icon objectea scaledSize: new google.maps.Size(h, w)propriedade no objeto
Sverrir Sigmundarson

2
@SverrirSigmundarson não deveria ser new google.maps.Size(w, h)h, w
Ravi Ram

@ RaviRam De fato, você está certo , obrigado por esta correção.
Sverrir Sigmundarson 01/03

14

MarkerImage foi descontinuada por Icon

Até a versão 3.10 da API JavaScript do Google Maps, ícones complexos eram definidos como objetos MarkerImage. O literal do objeto Icon foi adicionado na 3.10 e substitui o MarkerImage da versão 3.11 em diante. Os literais de objeto Icon suportam os mesmos parâmetros que MarkerImage, permitindo converter facilmente uma MarkerImage em um Icon removendo o construtor, envolvendo os parâmetros anteriores em {} e adicionando os nomes de cada parâmetro.

O código de Phillippe seria agora:

 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
Eu acho que isso não redimensiona a imagem, mas a corta.
Luis A. Florit

9
Você quer scaledSizemais do que size.
bbodenmiller

Sim, concordo com @bbodenmiller, scaledSize pode ser o que você está procurando. Para o meu projeto eu uso scaledSize e isso funciona para mim. ícone var = {url: imageName, scaledSize: novo google.maps.Size (8, 12)};
user908645

7

Excluir origem e âncora será imagem mais regular

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

Isso funcionou para mim! Se eu tentasse definir o parâmetro scaledImage dentro do código do marcador, ele não funcionaria.
Dumber_Texan2

1

Um iniciante completo como eu no tópico pode achar mais difícil implementar uma dessas respostas do que, se estiver sob seu controle, redimensionar a imagem você mesmo com um editor on-line ou um editor de fotos como o Photoshop.

Uma imagem de 500 x 500 aparecerá maior no mapa do que uma imagem de 50 x 50.

Não é necessária programação.


1

Então, eu tive esse mesmo problema, mas um pouco diferente. Eu já tinha o ícone como objeto, como sugere Philippe Boissonneault , mas estava usando uma imagem SVG.

O que resolveu isso para mim foi:
Alterne de uma imagem SVG para PNG e siga Catherine Nyo para ter uma imagem com o dobro do tamanho do que você usará.


0

Se você estiver usando o vue2-google-maps como eu, o código para definir o tamanho será assim:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.