Angular-google-maps: Como eu redimensiono um ícone?

Criado em 18 jul. 2016  ·  19Comentários  ·  Fonte: SebastianM/angular-google-maps

Descrição do problema
Eu gostaria de redimensionar um ícone para um tamanho predefinido. Como devo fazer isso?

Etapas para reproduzir e uma demonstração mínima do problema
Comportamento atual
Nenhuma opção de tamanho dimensionado presente.

Comportamento esperado / desejado
Quero poder redimensionar um ícone.

versão angular2 e angular2-google-maps
Mais recentes

Outra informação

AgmMarker stale feature-request

Comentários muito úteis

Consigo usar o objeto Icon em relação à propriedade iconUrl do marcador.

Meu ícone se parece com:

{
      url: require('../images/vehicle-active.png'), // gives a data://<value>
      scaledSize: {
        height: 40,
        width: 40
      }
}

E então eu vinculo isso a [iconUrl] . A variável 'iconUrl' pode ter um nome incorreto, mas se você olhar a fonte, ela apenas é passada para a propriedade 'icon' do gmaps.

Todos 19 comentários

Estou tentando fazer a mesma coisa, mas olhando as fontes, não há como fazer, a única maneira de atribuir um ícone é por meio de um url, você não pode usar o objeto google.maps.Icon. Eu estava pensando em modificar o código e criar uma solicitação de pull para ele.

@SebastianM Escrevi um código para lidar com google.maps.Symbol e google.maps.Icon para a propriedade icon do marcador.

Concordo que devemos oferecer suporte a objetos de string e de ícone e renomear a propriedade para ícone
icon?: string|Icon;

Quebrei 4 testes de unidade, mas tenho a atualização do ícone em meu fork. Eu também adicionei ao arquivo google-maps-types.ts.

@cdarken Acabei de ver seu PR e vou segurá-lo, é basicamente o mesmo. Tenho algumas sugestões sobre os nomes das propriedades. Acho que devemos corresponder ao nome que o Google usa.

@ rc3media Tentei mantê-lo compatível com as versões anteriores, por isso adicionei o acessador 'ícone' no marcador

Quando esse recurso será adicionado? este problema é de agosto X_X

Consigo usar o objeto Icon em relação à propriedade iconUrl do marcador.

Meu ícone se parece com:

{
      url: require('../images/vehicle-active.png'), // gives a data://<value>
      scaledSize: {
        height: 40,
        width: 40
      }
}

E então eu vinculo isso a [iconUrl] . A variável 'iconUrl' pode ter um nome incorreto, mas se você olhar a fonte, ela apenas é passada para a propriedade 'icon' do gmaps.

@bradseefeld onde você coloca o código que define o ícone: em seu componente de Não consigo encontrar o nome 'requer' .

Estamos usando o webpack para processar e empacotar nosso aplicativo. Ele lida com as chamadas necessárias. Não acho que essa solução funcione a menos que você esteja usando o webpack ou algo semelhante.

Sim, eu uso o webpack. Funciona, mas eu tive que adicionar:
declare function require(path: string);

Requer não é necessário (pelo menos com Ionic)

{
      url: 'assets/img/marker-me.png',
      scaledSize: {
        height: 40,
        width: 40
      }
}

@ sebrojas14 isso não está mais funcionando nas últimas versões 1.0.0.x.
Agora é realmente necessário "String", se não for fornecido, ele lança um erro.

Você tem alguma ideia de quando esse recurso tão solicitado estará disponível?

Obrigado

@pdanysz funciona bem para mim, versão 1.0.0-beta.3

@grreeenn já instalei essa versão e me deu um erro, é assim que estou perguntando :)

Você pode compartilhar seu código, ... talvez eu esteja fazendo algo errado :)

Obrigado

@pdanysz Perdemos nossas varinhas mágicas e não podemos ver seu erro daqui. Seria realmente útil se você pudesse compartilhar o erro para que saibamos com o que você está realmente lidando. Além disso, precisaremos do seu código para saber como corrigir o erro. Ou seja, para ajudá-lo, precisamos de uma reprodução completa para que possamos fiscalizar o problema. Você poderia nos dar isso?

Tentei usar este objeto:

icon = {
        url: '/assets/images/img.png', 
        scaledSize: {
          height: 40,
          width: 20
        }
      };

e isso funciona para mim.
Porém, o marcador deve ser usado para vários estabelecimentos em meu mapa e não posso usar uma única propriedade em minha classe ts para fazer isso funcionar conforme o planejado. Então, em vez de usar [iconUrl] = "icon" no meu html, estou tentando usar [iconUrl] = "getIcon (estabelecimento)", que retornaria o objeto descrito acima com URLs diferentes para cada estabelecimento. Isso faz com que o aplicativo congele ao tentar carregar o agm-map. O que escrevi aqui é suficiente para dizer se isso é possível? Posso enviar mais detalhes se necessário.
Obrigado!

Encontrado este comentário de hrdkisback no StackOverflow, que permite alterar dinamicamente o ícone do marcador do mapa e especificar o tamanho:

[iconUrl]='{"url": marker,"scaledSize": {"height": 10, "width": 10}}'

https://stackoverflow.com/questions/50812678/add-user-image-to-agm-marker-in-angular-5#comment88677807_50812678

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

matishw picture matishw  ·  3Comentários

ostapch picture ostapch  ·  4Comentários

ChrisDevinePimss picture ChrisDevinePimss  ·  3Comentários

marcelinobadin picture marcelinobadin  ·  3Comentários

mensch picture mensch  ·  3Comentários