Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
659 views
in Technique[技术] by (71.8m points)

angular - Angular2 - How to setup a google.maps.OverlayView? (translate JS prototype into Typescript)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Here is what worked for me (using ionic 2):

  1. Use these commands:

    npm install typings --global
    typings install dt~google.maps --global --save
    typings install google.maps --global
    
  2. Add "typings/*.d.ts" in your tsconfig.json:

    "include": [
      "src/**/*.ts",
      "typings/*.d.ts"
    ]
    
  3. Here is the TypeScript code:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...