从基于打字稿的 angular 控制器调用 GoogleMap MarkerClusterer 方法
Call GoogleMap MarkerClusterer method from typescript-based angular controller
我已经开始研究项目中的 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,或者我应该把它放在控制器逻辑之外?
THIS IS MY PROBLEM => var markerCluster = new MarkerClusterer(that.map, markers);
声明它:
declare var MarkerClusterer:any;
打字稿不会再抱怨了。
更多:http://basarat.gitbooks.io/typescript/content/docs/types/migrating.html
我把它放在:
之后
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare var MarkerClusterer: any;
及
之前
@Component({
使用下面的 npm 包而不是直接在 angular 中添加脚本。
将此包添加到您的 node_modules
npm i @googlemaps/markerclustererplus
在你的 Ts 文件中导入这个:
import MarkerClusterer from '@googlemaps/markerclustererplus';
const markerCluster = new MarkerClusterer(map, markers);
我已经开始研究项目中的 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,或者我应该把它放在控制器逻辑之外?
THIS IS MY PROBLEM => var markerCluster = new MarkerClusterer(that.map, markers);
声明它:
declare var MarkerClusterer:any;
打字稿不会再抱怨了。
更多:http://basarat.gitbooks.io/typescript/content/docs/types/migrating.html
我把它放在:
之后import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
declare var MarkerClusterer: any;
及
之前@Component({
使用下面的 npm 包而不是直接在 angular 中添加脚本。
将此包添加到您的 node_modules
npm i @googlemaps/markerclustererplus
在你的 Ts 文件中导入这个:
import MarkerClusterer from '@googlemaps/markerclustererplus';
const markerCluster = new MarkerClusterer(map, markers);