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?