0

Preciso adicionar uma OverlayView sobre um mapa em um projeto Ionic3.

Foi usado como base o tutorial da Google: Adicionar OverlayView Customizada

O código usado é uma adaptação pro TypeScript que encontrei pesquisando.

Código:

declare var google;

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    overlay: any;

    private srcImg: string = 'https://developers.google.com/maps/documentation/' + 'javascript/examples/full/images/talkeetna.png';

    //Todos os parametros necessários são passados no construtor
    constructor() {}

    //Definição de uma classe interna para o OverlayView
    //Adaptação encontrada de JavaScritp para TypeScritp
    USGSOverlay = class extends google.maps.OverlayView {

          bounds_: any;
          div_: any;
          image_: any;

          constructor(bounds, image, private map) {
            this.bounds_ = bounds;
            this.image_ = image;

            this.div_ = null;

            this.setMap(map);
          }

          onAdd() {
            var div = document.createElement('div');
            div.style.borderStyle = 'none';
            div.style.borderWidth = '0px';
            div.style.position = 'absolute';

            var img = document.createElement('img');
            img.src = this.image_;
            img.style.width = "100%";
            img.style.height = "100%";
            img.style.position = "absolute";
            div.appendChild(img);

            this.div_ = div;

            var panes = this.getPanes();
            panes.overlayLayer.appendChild(div);
          }

          draw() {
            var overlayProjection = this.getProjection();

            var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
            var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

            var div = this.div_;
            div.style.left = sw.x + 'px';
            div.style.top = ne.y + 'px';
            div.style.width = (ne.x - sw.x) + 'px';
            div.style.height = (sw.y - ne.y) + 'px';
          }

          onRemove() {
            this.div_.parentNode.removeChild(this.div_);
            this.div_ = null;
          }
    };

    //Aqui é onde a OverlayView deveria ser colocada sobre o mapa
    //na atual posição do usuário
    updateLocation() {
      this.platform.ready().then(()=>{
        this.geolocation.getCurrentPosition({
            maximumAge:0,
            timeout:5000,
            enableHighAccuracy: true
         }).then((resp) => {

               console.log(resp);
               let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
               this.LL = latLng;

               let bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(resp.coords.latitude - 0.04, resp.coords.longitude - 0.04),
    new google.maps.LatLng(resp.coords.latitude + 0.04, resp.coords.longitude + 0.04));

               this.overlay = new this.USGSOverlay(bounds, this.srcImg, this.map);

               this.changeMarker(resp.coords.latitude, resp.coords.longitude);

        }).catch((error) => {
               console.log('Erro ao recuperar sua posição', 
               JSON.stringify(error.stack));
               console.error(error);
               this.toastCtrl.create({
                   message: 'Erro ao localizar seu dispositivo. Insira manualmente seu ponto de partida.',
                   duration: 5000,
                   position: 'bottom'
            });
         });
      });
    }
}

Porém, nada acontece.

Alguém pode achar que é algum problema por eu não colocar a chamada super(); dentro do construtor da classe interna USGSOverlay. O problema que quando coloco essa chamada me retorna o seguinte erro ao rodar o projeto:

Call target does not contain any signatures.

Mas se eu tiro a chamada de super(); o projeto roda, mas a IDE me aponta o Warning :

Construtores de classes derivadas precisam conter uma chamada a 'super'

E de qualquer jeito nada funciona.

Alguém tem alguma ideia de como eu posso fazer essa OverlayView funcionar?

1 Resposta 1

0
 constructor(bounds, image, private map) {
        super(bounds, image, map);//Passar parâmetros ao chamar super()
        this.bounds_ = bounds;
        this.image_ = image;

        this.div_ = null;

        this.setMap(map);
      }

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 .