-1

Bom estou precisando rodar a imagem do icone de acordo com o header que chega para mim.

Estou tentando fazer de varias formar porém nenhuma delas funcionou, vamos la aos códigos.

PRIMEIRA TENTATIVA [PATH DO ICONE]

 this.marker = new google.maps.Marker({
  position: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
  map: this.map,
  optimized: false,
  icon: {
    PATH: 'meu path',
    anchor: new google.maps.Point(0, 0),
    size: new google.maps.Size(32, 32)
  },
})

Esta maneira funcionou porém o svg que preciso é complexo, ele tem mais de um path, se eu consegui-se junta-los em um path apenas, seria interessantíssimo e tudo funcionaria como precisava.

Então o problema desta tentativa é referente a um svg com vários paths o rotate funciona perfeitamente.

SEGUNDA TENTATIVA [URL SVG]

this.marker = new google.maps.Marker({
  position: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
  map: this.map,
  optimized: false,
  icon: {
    url: 'assets/img/maps/if_map-marker_299087.svg',
    anchor: new google.maps.Point(0, 0),
    size: new google.maps.Size(32, 32)
  },
});

Nesta opção meu problema está quando vou aplicar o rotate na imagem, estou fazendo assim:

document.querySelector('.gmnoprint img').setAttribute('style', 'transform:rotate(-134deg);');

porém não está funcionando como preciso. Ele adiciona tudo certo no html mas no momento de pegar o comando fica como se o fundo da imagem tive-se girando mas permanecesse no mesmo local; Na imagem do lado podemos ver o quadrado de azul (quando coloco o mouse em cima da imagem) e a imagem em si, o quadrado está rodando porém a imagem não.

inserir a descrição da imagem aqui

TERCEIRA TENTATIVA [URL IMG]

Nesta tentativa utilizei os mesmo métodos da tentativa 2 utilizando imagem em png, o resultado foi o mesmo.

INFORMAÇÕES DO PROJETO

@angular: 5.0.2
@types/googlemaps: 3.30.0
typescript: ^2.6.1

1 Resposta 1

-1

Existia uma lib JS chamada MarkerWithlabel em que você podia atribuir uma imagem como marcador, e inclusive digitar um texto em cima da imagem. No seu caso, você pode usar qualquer imagem, se rotacionar a imagem desse marcador e atribuir no atributo icon da variável marker (do exemplo abaixo) acho que funciona do jeito que você quer.

Você pode usar essa documentação Não-Oficial para ver

Seu uso basicamente era:

 var marker = new MarkerWithLabel({
   position: homeLatLng, // usa o 'new google.maps.LatLng()'
   draggable: true,  // true or false
   map: map,   // mapa que vai receber o marcador
   labelContent: "$425K",  // Texto em cima da imagem
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.75},
   icon: 'img/markers/marker_patrol.png' // SUBSTITUI A IMAGEM AQUI
 });

2
  • Acrescente mais informações sobre o plugin, modo de instalar e tudo mais, teria como /; Commented 30/11/2017 às 0:39
  • No link da documentação q eu mandei, entra na pasta SRC e baixa aquele markerwithlabel.js. Inclua ele no seu projeto onde achar conveniente, não esqueça de importar o script (normalmente feito no index.html usando a tag <script>. Simples assim. Na documentação ainda tem exemplos (na pasta examples) e maiores detalhes da documentação na pasta DOCS. Commented 1/12/2017 às 14:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .