I can not add OverlayView

0

I need to add a OverlayView to a map in a Ionic3 project.

The Google tutorial was used as the basis: Add Custom OverlayView

The code used is a TypeScript adaptation that I found by searching.

Code:

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

But nothing happens.

Someone may think it's a problem because I do not put the super(); call inside the constructor of the inner class USGSOverlay . The problem that when I put this call returns me the following error when running the project:

  

Call target does not contain any signatures.

But if I pull the call from super(); the project runs, but IDE points to Warning :

  

Derived class constructors need to contain a call to 'super'

And anyway, nothing works.

Does anyone have any idea how I can make this OverlayView work?

    
asked by anonymous 11.11.2018 / 17:32

1 answer

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);
      }
    
12.11.2018 / 14:38