I'd like to create a google map component that work like that :
https://jsfiddle.net/gvvy5vxz/2/
It's based on this : https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
I'm new to typescript and i'm stuck with the prototype implementation, specially with this JS snippet:
USGSOverlay.prototype = new google.maps.OverlayView();
USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
I have no clue how to translate that in a typescript way and how to declare things properly.
I guess I should create a class USGSOverlay that extends google.maps.OverlayView but it doesn't work.
class USGSOverlay extends google.maps.OverlayView{
bounds_;
image_;
map_;
div_;
constructor(bounds, image, map){
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
}
This my working base component. It creates a simple map inside #map:
import { Component } from '@angular/core';
declare const google: any;
/*
/* Component Map
*/
@Component({
selector: 'map',
template: `
<div id="map"></div>
`,
styles: [
`#map{ width:100%; height:100%; position: absolute; width:100%; height:100%; top:0; left:0;}`
],
})
export class MapComponent {
ngOnInit(){
google.maps.event.addDomListener(window, 'load', this.initMap);
}
initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 62.323907, lng: -150.109291},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
const bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
}
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…