admin管理员组文章数量:1326474
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?
Share Improve this question edited Aug 18, 2015 at 13:51 Alex asked Aug 18, 2015 at 10:49 AlexAlex 8,9373 gold badges44 silver badges59 bronze badges3 Answers
Reset to default 4THIS 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({
版权声明:本文标题:javascript - Call GoogleMap MarkerClusterer method from typescript-based angular controller - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742208507a2433264.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论