Question

我试图将google maps api包装成一个类。地图正确加载到模板。现在我想在地图上添加一个标记。问题是如何在show（）函数之外获取地图。

如果我这样做：

export default class InitMap {


    constructor(element) {

        this.element = element;

    }

    show() 
    {

        let map = new google.maps.Map(document.getElementById(this.element), this.options());

        this.addMarker();

        console.log(this.addMarker()); //undefined
    }

    options() 
    {

        return {

            zoom: 4,

            center: { lat: -25.363, lng: 131.044 },

            disableDefaultUI: true,

            zoomControl: true,

            scaleControl: false,

            streetViewControl: false,

            rotateControl: false,

            fullscreenControl: true

        }

    }

    marker(location) 
    {

        return new google.maps.Marker({

          position: location,

          map: map,

          title: 'test'

        });

    }

    addMarker() 
    {

        let uluru = new google.maps.LatLng(-25.363, 131.044);

        this.marker(uluru);

    }


}

我收到错误：

setMap：不是Map的实例;

是否可以将地图设置为类中的属性？或者我如何在show()方法之外访问它。

Answer 1

您可以在类中为map实例创建一个私有属性，并在必要时重用它。

以下代码应该没问题

export default class InitMap {
    private element;
    private map = null;

    constructor(element) {
        this.element = element;
    }

    show() {
        this.map = new google.maps.Map(document.getElementById(this.element), this.options());
        this.addMarker();
    }

    options() {
        return {
            zoom: 4,
            center: { lat: -25.363, lng: 131.044 },
            disableDefaultUI: true,
            zoomControl: true,
            scaleControl: false,
            streetViewControl: false,
            rotateControl: false,
            fullscreenControl: true
        }
    }

    marker(location) {
        return new google.maps.Marker({
          position: location,
          map: this.map,
          title: 'test'
        });
    }

    addMarker() {
        let uluru = new google.maps.LatLng(-25.363, 131.044);
        this.marker(uluru);
    }
}

您可以在https://stackblitz.com/edit/typescript-fgugag?embed=1&file=map.ts

查看工作示例

我希望这有帮助！

如何在方法外调用谷歌地图？

1 个答案: