从基于打字稿的角度控制器调用 GoogleMap MarkerClusterer 方法答案

【问题标题】：Call GoogleMap MarkerClusterer method from typescript-based angular controller从基于打字稿的角度控制器调用 GoogleMap MarkerClusterer 方法
【发布时间】：2015-08-18 10:49:03
【问题描述】：

我已经开始在我的项目中研究 TypeScript 方法，目前有点困惑如何正确组织对 MarkerClusterer 方法的调用。我目前必须类型定义引用：

///<reference path="../../typings/angularjs/angular.d.ts" /> 
///<reference path="../../typings/google.maps.d.ts" />

但是对于 MarkerClusterer js，我无法找到定义 ts 库。我的代码现在看起来是这样的：

class paspController {

public map: any;
public markers;
public mapTab: boolean;
public currentId: number;

//Some code

showTab(tabIndex: number) {
    if (tabIndex == 2) {
        this.mapTab = true;
        var that = this;
        setTimeout(function () {
            this.options = {
                zoom: 2,
                center: new google.maps.LatLng(1, 1),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            if (!that.map) {
                that.map = new google.maps.Map(document.getElementById('map'), this.options);
            }
            jQuery.ajax({
                type: "GET",
                url: 'GetDivesWithCoordinates/' + that.currentId,
                success: function (data) {                      
                    that.markers = [];
                    var marker;                       
                    for (var i = 0; i < data.length; i++) {
                        marker = new google.maps.Marker({ map: that.map, draggable: false, title: data[i].Location + ": " + data[i].DiveComment, position: new google.maps.LatLng(data[i].CoordinateX, data[i].CoordinateY) });
                        that.markers.push(marker);
                    }
                   // THIS IS MY PROBLEM => var markerCluster = new MarkerClusterer(that.map, markers);
                },
                error: function (e) {
                },
                async: false
            });
        }, 100);           
    }
}

我应该如何正确调用 MarkerClusterer，或者我应该把它放在控制器逻辑之外？

【问题讨论】：

标签： javascript angularjs google-maps typescript markerclusterer

【解决方案1】：

这是我的问题 => var markerCluster = new MarkerCluster(that.map, markers);

声明：

declare var MarkerClusterer:any;

打字稿不会再抱怨了。

【讨论】：

是的，谢谢，修复范围上下文确实解决了问题））
你把这些“declare var MarkerClusterer:any;”放在哪里了线？它可以进入方法或类内部吗？

【解决方案2】：

使用下面的 npm 包，而不是直接在 angular 中添加脚本。

将此包添加到您的 node_modules

npm i @googlemaps/markerclustererplus

在你的 Ts 文件中导入这个：

import MarkerClusterer from '@googlemaps/markerclustererplus';

const markerCluster = new MarkerClusterer(map, markers);

参考：https://github.com/googlemaps/js-markerclustererplus

【讨论】：

【解决方案3】：

我把它放在：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

declare var MarkerClusterer: any;

之前

@Component({

【讨论】：