javascript - Call GoogleMap MarkerClusterer method from typescript-based angular controller - Stack Overflow

admin管理员组

文章数量:1327469

I've started to investigate TypeScript approach in my project and currently bit confused how to correctly organize the call to MarkerClusterer method. I currently have to type-definitions references:

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

But for MarkerClusterer js I was unable to find definition ts library. My code now looks so:

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

How should I correctly call the MarkerClusterer, or maybe I should put it outside the controller logic?

I've started to investigate TypeScript approach in my project and currently bit confused how to correctly organize the call to MarkerClusterer method. I currently have to type-definitions references:

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

But for MarkerClusterer js I was unable to find definition ts library. My code now looks so:

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

How should I correctly call the MarkerClusterer, or maybe I should put it outside the controller logic?

• javascript
• angularjs
• google-maps
• typescript
• markerclusterer

Share Improve this question Follow edited Aug 18, 2015 at 13:51 Alex asked Aug 18, 2015 at 10:49 AlexAlex 8,93733 gold badges4444 silver badges5959 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

THIS IS MY PROBLEM => var markerCluster = new MarkerClusterer(that.map, markers);

Declare it :

declare var MarkerClusterer:any;

And typescript will not plain anymore.

More : http://basarat.gitbooks.io/typescript/content/docs/types/migrating.html

Use the below npm package instead of adding scripts directly in angular.

Add this package to your node_modules

npm i @googlemaps/markerclustererplus

In your Ts file import this:

import MarkerClusterer from '@googlemaps/markerclustererplus';

const markerCluster = new MarkerClusterer(map, markers);

Reference: https://github./googlemaps/js-markerclustererplus

I put it after the:

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

declare var MarkerClusterer: any;

and before

@Component({

本文标签： javascriptCall GoogleMap MarkerClusterer method from typescriptbased angular controllerStack Overflow