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?