typescript - 类型 'CustomMap' 缺少类型 'Map' 的以下属性

Question

我创建了一个自定义 KmlLayer 我必须将自定义 map 类的值添加到 map 中的类类似于本指南的属性(property)在这里:
https://developers.google.com/maps/documentation/javascript/examples/layer-kml
像这样:

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

上面我导入了 CustomMap从这里上课:

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

但是，使用此实现，我收到以下错误:

Type 'CustomMap' is missing the following properties from type'Map': addListener, fitBounds, getBounds, getCenter, and 31more.ts(2740) kml.d.ts(18, 9): The expected type comes from property'map' which is declared here on type 'KmlLayerOptions'

当我点击 Map在我的 CustomMap 里面类，我看到具有这些属性的类型定义文件，但是当我导入和实例化 CustomMap 时，这些属性现在丢失了。类(class)？
我真的需要这些作为单独的类工作。
如果有人想尝试克隆样板，看看您是否可以重现:
https://github.com/ldco2016/mappy
我将其添加为一种方法:

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

但没有显示。

Answer 1

我相信 typescript 想要你的 CustomMap延长 google.maps.Map .但是由于您似乎在使用组合，我想您必须代理所有这些方法。

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

或者，您可以制作 googleMap属性 public(或为它添加一个 getter)并在层实例化期间使用它:

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

但是每次 googleMap 的值都必须重新实例化该层。属性更改(在添加 Oakland 或 SanFran 等之后)。
我希望这可以帮助您找到正确的解决方案。