typescript - Tipul 'CustomMap' nu are următoarele proprietăți din tipul 'Map'

Am creat o clasă personalizată KmlLayer la care a trebuit să adaug o valoare a clasei de hartă personalizate în proprietatea map similar cu acest ghid aici:

https://developers.google.com/maps/documentation/javascript/examples/layer-kml

Așa:

import { CustomMap } from "./CustomMap";
// src: string = "http://cales-map.webitects.com/HOLC_KML.kmz";
const customMap = new CustomMap("map");

export class CustomKmlLayer {
  private kmlMap: google.maps.KmlLayer;

  // here is where I am initializing the KML Layer of the map
  constructor(src: string) {
    this.kmlMap = new google.maps.KmlLayer({
      url: src,
      map: customMap,
    });
  }

  kmlLayerMethod() {
    google.maps.event.addListener(this.kmlMap, "click", () => {
      console.log("KML Layer event clicked!");
    });
  }
}

Deasupra am importat clasa CustomMap de aici:

// Instructions to every other class
// on how they can be an argument to
// 'addMarker', even though right now

import { Data } from "./Data";

// there is only one 'Data' class
export interface Mappable {
  Latitude: number;
  Longitude: number;
  markerContent(): string;
}

export class CustomMap {
  private googleMap: google.maps.Map;

  // here is where I am initializing the map to be upon boot up
  constructor(divId: string) {
    this.googleMap = new google.maps.Map(document.getElementById(divId), {
      zoom: 6,
      center: {
        lat: 36.778259,
        lng: -119.417931,
      },
      disableDefaultUI: true,
      styles: [...],
    });
  }

  // this method gets applied later inside `index.ts` when
  // user clicks on 'Oakland, CA' from dropdown
  addOakland(): void {
    const oak = (this.googleMap = new google.maps.Map(
      document.getElementById("map"),
      {
        zoom: 13,
        center: {
          lat: 37.804363,
          lng: -122.271111,
        },
        disableDefaultUI: true,
        styles: [...],
      }
    ));
  }

  // this method gets applied later inside `index.ts` when
  // user clicks on 'San Francisco, CA' from dropdown
  addSanFran(): void {
    this.googleMap = new google.maps.Map(document.getElementById("map"), {
      zoom: 13,
      center: {
        lat: 37.733795,
        lng: -122.446747,
      },
      disableDefaultUI: true,
      styles: [...],
    });
  }

  // makes the red dots happen including the listener
  // for clicking the dots and seeing their label
  addCircleMarker(mappable: Mappable): void {
    const circleMarker = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 1,
      map: this.googleMap,
      clickable: true,
      center: {
        lat: mappable.Latitude,
        lng: mappable.Longitude,
      },
      radius: 120,
    });

    const infoWindow = new google.maps.InfoWindow({
      content: mappable.markerContent(),
    });

    google.maps.event.addListener(circleMarker, "click", () => {
      infoWindow.setPosition(circleMarker.getCenter());

      infoWindow.open(this.googleMap);
    });
  }
}

Totuși, cu această implementare, primesc următoarea eroare:

Tipul 'CustomMap' nu are următoarele proprietăți din tipul 'Map': addListener, fitBounds, getBounds, getCenter și încă 31. ts(2740) kml.d.ts(18, 9): Tipul așteptat provine de la proprietatea 'map' care este declarată aici pe tipul 'KmlLayerOptions'

Când fac clic pe Map în interiorul clasei mele CustomMap, văd fișierul de definiție a tipului cu acele proprietăți, dar acele proprietăți lipsesc acum când import și instanțiez clasa CustomMap?

Am cu adevărat nevoie ca acestea să funcționeze ca clase separate.

Dacă cineva vrea să încerce să cloneze șablonul și să vadă dacă poate reproduce: https://github.com/ldco2016/mappy

L-am adăugat ca metodă:

addKmlLayer(): void {
    this.kmlLayer = new google.maps.KmlLayer({
      url: "http://my-maps.com/HOLC_KML.kmz",
      map: this.googleMap,
    });
  }

dar nimic nu se afișează.

Răspuns #1

Cred că TypeScript vrea ca CustomMap să extindă google.maps.Map. Dar, deoarece pare că folosești compoziția, presupun că va trebui să faci proxy pentru toate aceste metode.

new google.maps.KmlLayer({
      url: src,
      map: customMap, // customMap should implement google.maps.Map
    });

Alternativ, ai putea să faci proprietatea googleMap publică (sau să adaugi un getter pentru ea) și să o folosești în timpul instanțierii layer-ului:

new google.maps.KmlLayer({
      url: src,
      map: customMap.googleMap,
    });

Dar va trebui să re-instantiezi stratul de fiecare dată când se schimbă valoarea proprietății googleMap (după ce adaugi Oakland sau SanFran etc.).

Sper că acest lucru te poate ajuta să găsești soluția potrivită.