google-maps - example - google maps angular 6

Angular2: cómo configurar google.maps.OverlayView?(traducir el prototipo JS en Typescript)

Question

Me gustaría crear un componente de mapa de Google que funcione así: https://jsfiddle.net/gvvy5vxz/2/

Está basado en esto: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

Soy nuevo en el texto mecanografiado y estoy atascado con la implementación del prototipo, especialmente con este fragmento JS:

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

No tengo ni idea de cómo traducir eso de forma mecanografiada y cómo declarar las cosas correctamente.

Supongo que debería crear una clase USGSOverlay que extienda google.maps.OverlayView pero no funciona.

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

Este es mi componente base de trabajo. Crea un mapa simple dentro de #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));
  }
}

Answer 1

Estaba en la buena forma en que funciona ...

import { Component } from ''@angular/core'';
declare const google: any;

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

  /**
   * onAdd is called when the map''s panes are ready and the overlay has been
   * added to the map.
   */
  onAdd(){
    const div = document.createElement(''div'');
    div.style.borderStyle = ''none'';
    div.style.borderWidth = ''0px'';
    div.style.position = ''absolute'';

    // Create the img element and attach it to the div.
    const 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;

    // Add the element to the "overlayLayer" pane.
    const panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
  };

  draw(){

    // We use the south-west and north-east
    // coordinates of the overlay to peg it to the correct position and size.
    // To do this, we need to retrieve the projection from the overlay.
    const overlayProjection = this.getProjection();

    // Retrieve the south-west and north-east coordinates of this overlay
    // in LatLngs and convert them to pixel coordinates.
    // We''ll use these coordinates to resize the div.
    const sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    const ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    // Resize the image''s div to fit the indicated dimensions.
    const 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'';
  };

  // The onRemove() method will be called automatically from the API if
  // we ever set the overlay''s map property to ''null''.
  onRemove(){
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  };
};



/*
/*  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 {

  overlay;

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

    // The photograph is courtesy of the U.S. Geological Survey.
    const srcImage = ''https://developers.google.com/maps/documentation/'' +
        ''javascript/examples/full/images/talkeetna.png'';

    // The custom USGSOverlay object contains the USGS image,
    // the bounds of the image, and a reference to the map.
    this.overlay = new USGSOverlay(bounds, srcImage, map);
  }
}

Answer 2

Aquí está lo que funcionó para mí (usando iónico 2):

1. Usa estos comandos:

   npm install typings --global
   typings install dt~google.maps --global --save
   typings install google.maps --global

2. Agregue "typings / *. D.ts" en su tsconfig.json:

   "include": [
     "src/**/*.ts",
     "typings/*.d.ts"
   ]

3. Aquí está el código de TypeScript:

   import { Component, ViewChild, ElementRef } from ''@angular/core'';
   import { NavController } from ''ionic-angular'';
   // import typings
   import { } from ''@types/googlemaps'';
   /*
   /*  Component Map
   */
   @Component({
       selector: ''page-overlay'',
       templateUrl: ''overlay.html''
   })
   export class OverlayPage {
       @ViewChild(''map'') mapElement: ElementRef;
       map: any;
       // weird syntax, I know, but it works
       constructor(public navCtrl: NavController) {
       }
       USGSOverlay = class extends google.maps.OverlayView {
           bounds_: any;
           image_: any;
           map_: any;
           div_: any;
           constructor(bounds, image, private map) {
               super();
               // 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.set
           }
           /**
            * onAdd is called when the map''s panes are ready and the overlay has been
            * added to the map.
            */
           onAdd() {
               const div = document.createElement(''div'');
               div.style.borderStyle = ''none'';
               div.style.borderWidth = ''0px'';
               div.style.position = ''absolute'';
               // Create the img element and attach it to the div.
               const 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;
               // Add the element to the "overlayLayer" pane.
               const panes = this.getPanes();
               panes.overlayLayer.appendChild(div);
           };
           draw() {
               // We use the south-west and north-east
               // coordinates of the overlay to peg it to the correct position and size.
               // To do this, we need to retrieve the projection from the overlay.
               const overlayProjection = this.getProjection();
               // Retrieve the south-west and north-east coordinates of this overlay
               // in LatLngs and convert them to pixel coordinates.
               // We''ll use these coordinates to resize the div.
               const sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
               const ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
               // Resize the image''s div to fit the indicated dimensions.
               const 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'';
           };
           // The onRemove() method will be called automatically from the API if
           // we ever set the overlay''s map property to ''null''.
           onRemove() {
               this.div_.parentNode.removeChild(this.div_);
               this.div_ = null;
           };
       };
       ngOnInit() {
           this.loadMap();
           var bounds = new google.maps.LatLngBounds(
               new google.maps.LatLng(62.281819, -150.287132),
               new google.maps.LatLng(62.400471, -150.005608));
           // The photograph is courtesy of the U.S. Geological Survey.
           var srcImage = ''https://developers.google.com/maps/documentation/'' +
               ''javascript/examples/full/images/talkeetna.png'';
           const overlay = new this.USGSOverlay(bounds, srcImage, this.map);
           //overlay.setMap(this.map);
       }
       ionViewDidLoad() {
           this.loadMap();
           var bounds = new google.maps.LatLngBounds(
               new google.maps.LatLng(62.281819, -150.287132),
               new google.maps.LatLng(62.400471, -150.005608));
           // The photograph is courtesy of the U.S. Geological Survey.
           var srcImage = ''https://developers.google.com/maps/documentation/'' +
               ''javascript/examples/full/images/talkeetna.png'';
           const overlay = new this.USGSOverlay(bounds, srcImage, this.map);
           //overlay.setMap(this.map);
       }
       loadMap() {        
           let latLng = new google.maps.LatLng(62.323907, -150.109291);
           var mapOptions = {
               zoom :15,
               center : latLng,
               enableHighAccuracy: true,
               timeout: 5000,
               maximumAge: 0
           };
           this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
       }
   }

Answer 3

También tuve muchos problemas con esto, pero finalmente me salió bien. Es vital que el script de google maps esté precargado (cargué el mío en mi resolución de ruta) de lo contrario obtendrás un error ''google'' no definido. Vea aquí cómo instalé typings e importé la biblioteca.

En cuanto a la sintaxis, terminé usando una clase interna para esto. Esto se debe a que, si se trata de una clase de nivel superior, WebPack intenta (sin éxito) encontrar la biblioteca de google maps en tiempo de compilación:

// import typings
import {} from ''@types/googlemaps'';

@Component({...})
export class MapComponent implements OnInit {
  // weird syntax, I know, but it works
  USGSOverlay = class extends google.maps.OverlayView {
    constructor(bounds, image, private map){
      super();
      ...
      this.setMap(this.map);
    }
    onAdd(){...}
    draw(){...}
  }
  ngOnInit() {
    const overlay = new this.Overlay(bounds, image, map);
  }
}