angular-google-maps 🚀 - 如何使用标记群集器？

抱歉，我没有建议，我现在可以给你

SebastianM 于 2016-05-04

@SebastianM我认为可以通过访问地图对象来完成，请参见此处： https :

alexweber 于 2016-05-04

有人真的这样做过吗？ markerclusterer js文件似乎不喜欢我从.getMap（）传入的地图对象

AbdulTheProgrammer 于 2016-05-10

@AbdulTheProgrammer我一直在等待进入，我最大的希望是它会工作吗？您确定在GoggleMapsAPIWrapper服务的同一实例上调用了map，与map指令所使用的实例调用了getMap（），这是我目前最大的问题...。

alexweber 于 2016-05-10

我已经通过使用自定义组件并将其包含在sebm-google-map中来实现了；它使用GoogleMapsAPIWrapper和nativeMap。

我使用Google Maps JavaScript API（window.google.maps）手动添加标记，然后创建MarkerClusterer。

希望对您有所帮助。

ricardojbertolin 于 2016-06-17

@ricardojbertolin确实有帮助，就像塞巴斯蒂安（Sebastian）在这里＃311指出的那样，地图内的自定义组件正是如何访问本地地图对象的方法，尽管肯定有更好的方法使用manager服务添加标记。相对于通过js API手动执行...

alexweber 于 2016-06-17

我也在努力使js-marker-clusterer工作。我获得了对本机地图实例的引用，但是我还需要对本机地图标记的引用。任何人都知道a如何获得我的<sebm-google-map-marker> s的本机地图标记？

jfmaeck 于 2016-06-28

@alexweber
您是否有关于自定义组件和GoogleMapsApiWrapper的示例？
我似乎不明白“在组件内部放置自定义组件”的含义。

stewieoO 于 2016-06-28

@ siegerx3听起来很简单，首先创建一个自定义组件或指令：

import { Directive } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';

@Directive({
  selector: 'custom-directive'
})
export class CustomMapDirective {
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {
    this.gmapsApi.getNativeMap().then(map => {
      // map is the native google map object and the wrapper is the same instance as the one on the map
    });
  }
}

我使用了指令，因为我不需要模板，可以使用组件并根据需要指定一个。

不用说，您需要在使用组件的directives部分中指定您的自定义组件/指令。现在，将您的组件放入地图中：

<sebm-google-map>
  <!-- markers, info windows, etc -->

  <custom-directive></custom-directive>
</sebm-google-map>

由于Angular2 DI的工作方式，由于我们没有为GoogleMapsAPIWrapper服务指定提供程序，因此它将在组件树中向上移动，直到找到一个。在这种情况下，这是第一步，我们使用sebm-google-map组件中提供的GoogleMapsAPIWrapper

alexweber 于 2016-06-28

👍14

@jfmaeck在MarkerManager服务上有一个getNativeMarker()方法，您可以使用该方法，并且可以使用上述包装方法获得相同的标记管理器服务实例。

alexweber 于 2016-06-28

@alexweber
看到代码，现在的解释就有意义了！谢谢：）

stewieoO 于 2016-06-28

🎉1

@alexweber非常感谢您对如何获取本机标记实例的提示。不过，我仍然有一个问题： MarkerManager的getNativeMarker()方法期望将SebmGoogleMapMarker实例（标记组件）作为其参数。您知道如何获取该组件中的变量以将其传递给getNativeMarker函数吗？

jfmaeck 于 2016-06-28

@jfmaeck没问题！我目前无法确定100％的确定，但是您可能只需要在组件中使用@ViewChild('myMarker'): SebmGoogleMapMarker并在标记中引用# ： <sebm-google-map-marker #myMarker> just记住ViewChild只在ngAfterViewInit正确解析。

alexweber 于 2016-06-28

@alexweber再次感谢您的帮助。不幸的是，我无法使用@ViewChildren访问标记。我在Plunkr上演示了该示例，并对它进行了一些更改，以便将ViewChildren结果记录在控制台中（此刻为空数组）：

markers after view init []

http://plnkr.co/edit/7rdOz3QswDL0pik7SmAS?p=preview

我想您很忙，但是如果您有机会看一下，我将非常感谢。

jfmaeck 于 2016-06-29

当您使用@ContentChildren时使用@jfmaeck （因为您想获取包含在组件元素中的实例），它可以工作： http : //plnkr.co/edit/mukdlZ7K7CIFm6aTdDTp?p=preview

SebastianM 于 2016-06-30

@jfmaeck您接近了，这是您的@ViewChildren的工作之叉： http : //plnkr.co/edit/rJMCFoX9GokturcJljLh?p=preview

要使其使用自定义地图组件@ContentChildren （如@SebastianM指出）可以正常工作，但我想您只是创建了它即可访问标记，因此实际上并不需要在组件中添加该额外组件。第一名。

alexweber 于 2016-06-30

非常感谢@SebastianM和@alexweber！

jfmaeck 于 2016-06-30

@alexweber @SebastianM首先，如何包含您使用js-marker-clusterer的库？有没有办法在特定的缩放级别上使用群集？以及如何包含此类群集的图像： http :

Sireini 于 2016-08-09

@ricardojbertolin您

jonathan-chin 于 2016-10-16

@alexweber ，您是否测试过添加markerclusterer.js？任何相关的例子吗？

jpcode 于 2016-11-23

@jpcode抱歉，暂时没有进行此操作...

alexweber 于 2016-11-24

我在一个项目中有一个可行的解决方案。
如果需要的话，我可以举个例子。
@jpcode
@alexweber

stewieoO 于 2016-11-24

@ siegerx3很好，会有所帮助。
我正在使用Google Maps api + markerclusterer.js在替代方法中工作。

jpcode 于 2016-11-24

@ siegerx3 ，这是一个仅使用google maps lib的基本示例：
https://plnkr.co/Tr1Ykkj12HCkF9InQmuW

待审核的POC：
在使用angular2-google-maps的方式中，我认为需要在内部添加以防止与作为“ google”的全局对象发生冲突。
一种解决方法是阻止从lib加载google。
提供（MapsAPILoader，{useClass：NoOpMapsAPILoader}）并自行加载并添加clusterer.js。

但是，如果angular2-google-maps添加指令以支持集群器会更好：

jpcode 于 2016-11-24

@jpcode
我花了几个小时试图让它在pl弹琴上工作……没有任何成功。
总会出现一些与此问题无关的错误。
所以我将在这里向您展示代码...

import { Directive, OnDestroy, OnInit } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { GoogleMap, Marker } from 'angular2-google-maps/core/services/google-maps-types';
import { AppService } from '../../../services/index';
import { Observable } from 'rxjs';

declare const google;
declare const MarkerClusterer;

@Directive({
  selector: 'custom-map'
})
export class CustomMapDirective implements OnInit, OnDestroy {

  private map: GoogleMap;

  constructor(private gmapsApi: GoogleMapsAPIWrapper, private appService: AppService) {
  }

  ngOnInit() {

    this.gmapsApi.getNativeMap().then(map => {
      this.map = map;

      let shopMarker = {
        url: "assets/img/marker_shop.svg", // url
        scaledSize: new google.maps.Size(50, 50)
      }
      let loungeMarker = {
        url: "assets/img/marker_lounge.svg", // url
        scaledSize: new google.maps.Size(50, 50)
      }

      let markers = [];

      let style = {
        url: "/assets/img/marker.svg",
        height: 50,
        width: 50,
        anchor: [-14, 0],
        textColor: '#bd0b1d',
        textSize: 11,
        backgroundPosition: "center center"
      };

      var options = {
        imagePath: "/assets/img/marker",
        gridSize: 70,
        styles: [style, style, style]
      };

      Observable
        .interval(500)
        .skipWhile((s) => this.appService.Shops == null || this.appService.Shops.length <= 0)
        .take(1)
        .subscribe(() => {
          for (let shop of this.appService.Shops) {
            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(shop.Latitude, shop.Longitude),
              icon: shop.Lounge ? loungeMarker : shopMarker
            });
            google.maps.event.addListener(marker, 'click', () => {
              this.appService.SelectedShop = shop;
            });
            markers.push(marker);

          }

          var markerCluster = new MarkerClusterer(map, markers, options);
          }
        })
    });
  }
}

您将此指令放入了angular2-google-maps标签中：

<sebm-google-map>
      <custom-map></custom-map>
</sebm-google-map>

stewieoO 于 2016-11-25

👍1

@ siegerx3 ，我使用angular2-google-maps进行了POC

方法：

从index.html添加Google地图
导入clusterer.js
防止从angular2-google-maps加载google maps lib（使用provider）
添加指令以从lib获取原始地图实例
使用google / markercluster变量用作全局变量

您也可以使用angular-2-google-maps的其他指令，但是我认为如果将某些内容添加到lib中以支持集群器会更好。
->

因为使用这个lib来绘制地图没有意义，接下来只使用google maps，在这种情况下，我认为最好只使用google maps libs + clusterer.js作为plunkr之前的展示。

import { Directive } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { GoogleMap, Marker } from 'angular2-google-maps/core/services/google-maps-types';
// npm install js-marker-clusterer --save
import 'js-marker-clusterer/src/markerclusterer.js';

declare const google;
declare const MarkerClusterer;

@Directive({
  selector: 'googlemap-directive'
})



export class GoogleMapDirective {

  googleMarkers : any;
  _map: any;

  zoom: number = 3;
  lat: number = 51.673858;
  lng: number = 7.815982;

  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982
      },
      {
          lat: 51.373858,
          lng: 7.215982
      },
      {
          lat: 51.723858,
          lng: 7.895982
      }
  ]

   initMarkers(){
    let i = 0;
    let markers = this.markers;
    var result = [];
    for ( ; i < markers.length; ++i ){
       result.push( new google.maps.Marker({
            position : markers[ i ] 
        })
       );
    }
    return result;
  }



  constructor (private gmapsApi: GoogleMapsAPIWrapper) {
    var me = this;
    this.gmapsApi.getNativeMap().then(map => {
      // instance of the map.
      me._map = map;
      me.initializeMap();
    });
  }

  initializeMap(){
      var me = this;
      me.googleMarkers = me.initMarkers();
      var mc = new MarkerClusterer( me._map, me.googleMarkers, { imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m' } );
  }

}

interface marker {
    lat: number;
    lng: number;
}

为了防止负载，谷歌地图两次使用angular2-google-maps的提供程序
在您的组件定义中添加一个提供程序

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

import { SebmGoogleMap, MapsAPILoader, NoOpMapsAPILoader  } from 'angular2-google-maps/core';

@Component({
    selector: 'site-map',
    templateUrl: './site-map.component.html',
    styleUrls: ['./site-map.component.css'],
  providers: [
    {
      provide: MapsAPILoader, useClass: NoOpMapsAPILoader
    }
  ],
})

在模板定义中，您需要添加指令。

<sebm-google-map #sitemap
  [disableDefaultUI]="false"
  [zoom] = "zoom"
  [zoomControl]="true" 
  [latitude]="lat" [longitude]="lng">
  <!--
  <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="openDetail(m)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"

      [markerDraggable]="m.draggable"
      [iconUrl]="'assets/img/marker.png'"
      (dragEnd)="markerDragEnd(m, $event)">

    <sebm-google-map-info-window [disableAutoPan]="true" (infoWindowClose)="onCloseDetail.emit()">
      <h5>{{m.address}}</h5>
      <div>{{m.city}}, {{m.state}}, {{m.country}}</div>
    </sebm-google-map-info-window>    
  </sebm-google-map-marker>
  -->
  <googlemap-directive></googlemap-directive>
</sebm-google-map>

jpcode 于 2016-11-25

👍7

@jpcode
我同意应该将其添加到angular2-google-maps库，尽管在我的解决方案中，map sdk不会加载两次，就像您提到的那样。

我只是让agm lib尽其所能，并且自己做一些必要的部分。

stewieoO 于 2016-11-26

👍5

@ siegerx3
您可以在zip文件中分享一个有效的示例吗？

hellsm83 于 2016-11-28

@ hellsm83
如果可以的话，我明天再创造一个：）
您熟悉angular-cli吗？否则我只会做一个基本的。

stewieoO 于 2016-11-28

@ siegerx3
是的，有点...我能够使用Google Maps API +标记群集器执行群集化。我更愿意使用angular2-google-maps ...来获得解决方案的完整视图。
非常感谢您的帮助

hellsm83 于 2016-11-29

@ hellsm83
https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc

仅npm install和ng serve 。如果您尚未安装angular-cli，请先安装npm install angular-cli -g 。

请记住，这不是最佳解决方案。这只是我的一种解决方法，因为还没有集群指令。

编辑：
格式化可能很奇怪，因为我的原子无法正常工作，所以我使用的是旧的好编辑器^^

stewieoO 于 2016-11-29

👍3

@ siegerx3
多谢。我会检查这个解决方案:)

hellsm83 于 2016-11-29

在角度2的Google地图中是否对此有任何更新？我真的需要在正在进行的项目中使用它

SteveDowsett 于 2016-12-20

@SteveDowsett
您仍然可以使用包括我在内的人提供的示例之一：）
如果你足够的话

stewieoO 于 2016-12-20

@ hellsm83
顺便说一句，一切正常吗？对您有帮助吗？

stewieoO 于 2016-12-20

@ siegerx3
是的，它对我有很大帮助。天哪！

hellsm83 于 2016-12-21

@ siegerx3

我自己使用了您的示例，并且效果很好，非常感谢！

但是我现在的问题是我似乎无法更新标记。我使用ngOnChanges传递了更新的点数组，并且可以看到数组发生了变化，但是当数组变空时，不会删除标记。

有小费吗？

nanomoffet 于 2016-12-27

@nanomoffet
伟大的帮助！

实际上，几天前我遇到了相同/相似的问题，但是我还没有时间找到解决方案。

当我发现一些东西的时候，我会在这里发布。

stewieoO 于 2016-12-28

我找到了持久性群集问题的解决方案。

        .interval(100)
        .take(1)
        .subscribe(() => {
        if(this.markerCluster) {
          this.markerCluster.clearMarkers();
        }
          if (this.points.length > 0) {
            for (let point of this.points) {
              let marker = new google.maps.Marker({
                position: new google.maps.LatLng(point.Latitude, point.Longitude),
                icon : markerIcon
              });
              this.markers.push(marker);
            }
          } else {
            this.markers = [];
          }
          this.markerCluster = new MarkerClusterer(map, this.markers, options);

        });

我在Observable外部声明了markerCluster，然后，如果它在开始时存在，它将运行一个名为clearMarkers（）的函数，该函数将从地图中删除所有现有标记，尽管它将标记保留在数组中（因此，其他逻辑可以清空数组））。

这解决了我的问题，也许它也会对您有帮助@ siegerx3

nanomoffet 于 2016-12-29

@nanomoffet

当我再次处理该部分时，我会检查一下，谢谢:)

stewieoO 于 2016-12-29

嗨，大家好，谢谢你的提示
我设法通过使用子组件来获取getNativeMap
我正在实现地图上下文菜单
<sebm-google-map> <mapmenu-component></mapmenu-component>
我的问题是子组件模板不可见
它呈现为html
<div class="sebm-google-map-content" _ngcontent-rgy-8="">
这是一个看不见的组成部分

我原则上可以在sebm-google-map中放置一些html吗？
我想将其作为html而不使用OverlayView

我能够通过将功能分为2个组件（指令+组件）来处理它
1.）必须位于sebm-google-map内并用作api访问器的一个
2））必须在sebm-google-map之外（因为否则我看不到其生成的html）

hrecho 于 2017-01-02

大家好，
@ siegerx3我使用了来自https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc的代码
它很棒，但是我无法整合和。我想要实现的是，集成了cluster + marker标签+ info窗口。因此，当我单击群集时，个人应具有标记标签，单击该标签应弹出一个信息窗口。知道我如何使它工作

sprakashg 于 2017-01-11

@sprakashg
我认为，由于尚未在模块中实现集群，并且您没有使用模块中的标记，因此必须在用于集群的同一自定义组件中使用本机maps api。
这意味着，您可以像在普通javascript中一样手动添加标签和信息窗口。

stewieoO 于 2017-01-11

@sprakashg

我实际上是在自己做同样的事情。我必须为该库切换到MarkerClustererPlus，并且使用以下代码为各个标记以及集群本身启用信息窗口：

        .interval(100)
        .take(1)
        .subscribe(() => {
        if (this.markerCluster) {
          this.markerCluster.clearMarkers();
          this.markers = [];
        }
          if (this.points.length > 0) {
            for (let point of this.points) {
              let marker = new google.maps.Marker({
                position: new google.maps.LatLng(point.Latitude, point.Longitude),
                icon : markerIcon,
                title: 'this is a title'
              });
              marker.addListener('mouseover', function() {
                infowindow.open(map, marker);
              });
              marker.addListener('mouseout', function() {
                infowindow.close(map, marker);
              });
              this.markers.push(marker);
            }
          } else {
            this.markers = [];
            if (this.markerCluster) {
              this.markerCluster.clearMarkers();
            }
          }
          this.markerCluster = new MarkerClusterer(map, this.markers, options);
          google.maps.event.addListener(this.markerCluster, 'mouseover', function(cluster) {
            let content = 'Cluster Window';
            let info = new google.maps.MVCObject;
            let clusterInfowindow = new google.maps.InfoWindow();

            clusterInfowindow.setContent(content);
            clusterInfowindow.open(map, info);
            clusterInfowindow.setPosition(cluster.getCenter());
            google.maps.event.addListener(map, 'zoom_changed', function() { clusterInfowindow.close(); });
          });

        });

唯一的问题是弄清楚如何关闭群集窗口-离开地图时它们会关闭，而离开群集时它们不会关闭。

nanomoffet 于 2017-01-12

❤1 👍1

有谁知道我们是否可以在“角度2”中使用航点，但可以使用“ https://developers.google.com/maps/documentation/javascript/reference#DirectionsWaypoint ”中引用的经纬度和纬度？

developernm 于 2017-01-13

@naranmistry您可以指定一点您想做什么吗？

我看不出您的计划到底是什么。也许别人了解？

stewieoO 于 2017-01-13

基本上，我希望能够将lng和lat值（而不是字符串）放入路标，可以使用angular2-google-maps吗？因为我想使用经度和纬度值显示具有多个特定中途停留的路线

developernm 于 2017-01-13

如果我理解正确，那么我看不到该模块的connectino，但是总的来说，如果您查看文档中显示为location Type: string|LatLng|Place 。所以是的，您可以使用Google Maps LatLng对象，该对象在其构造函数中采用数字值。

那是你需要的吗？

stewieoO 于 2017-01-13

基本上我想知道如何做，正如我试图按照文档中所述将其传递给我，但是它一直失败。有使用lat和lng的航路点的有效示例吗？

对不起，我应该更清楚了

developernm 于 2017-01-13

我不这么认为。但是，如果您可以提供代码作为示例？就像在朋克中，我可以看到我能找到的东西:)

stewieoO 于 2017-01-13

好吧，我会尝试把一个放在一起

谢谢

developernm 于 2017-01-13

抱歉，我可以在_marker-cluster_指令内的_infowindow_中拦截_click事件_还是为每个标记渲染_sebm-google-map-info_组件？

谢谢！

fsciuti 于 2017-01-31

我有同样的问题@fsciuti。
您找到解决方案了吗？

kmer75 于 2017-03-16

由于agm-maps仍然不支持集群，因此我以@ siegerx3为例，对标记更改的改进和@nanomoffet的标记信息窗口示例。干得好！谢谢，您的例子对我们有很大帮助。

为了回馈，我在以下链接下提供了@ siegerx3示例的更新版本：

https://drive.google.com/open?id=0B51AX67ezltoOFdSNTQ1NlQ4SU0

进行了以下更改：

更新了依赖项以适合Angular 4.1和@agm/core
更新了代码以适合Angular 4.1和@agm/core
增加了标记变化检测
添加了标记信息窗口示例
固定代码样式

andorfermichael 于 2017-05-27

👍5

@andorfermichael感谢一群人，你真棒！请问一个问题：如果我想外部化指令的样式（标记和群集），应该怎么做？我曾考虑过将其简单地做成一个组件，但是后来我不知道如何正确地将Observable与您拥有的选项和样式一起使用...

picosam 于 2017-06-01

🎉2

@picosam

您不需要组件，而只需使用ES6模块。

创建一个新文件并导出配置，例如：

_google-maps.config.ts_

export const markerIcon = {
  url: '/assets/marker.png', // url
  scaledSize: new google.maps.Size(35, 35)
};

const style = {
  url: '/assets/cluster.png',
  height: 40,
  width: 40,
  textColor: '#FFF',
  textSize: 11,
  backgroundPosition: 'center center'
};

export const options = {
  imagePath: '/assets/cluster',
  gridSize: 70,
  styles: [style, style, style]
};

然后在_marker-cluster.ts_中导入这些变量/模块：

import { markerIcon, options } from './google-maps.config';

andorfermichael 于 2017-06-02

@andorfermichael danke noch mal !!!
当然，我可以继续使用复杂的图标，以及最新的Google Maps Javascript模块版本中记录的所有内容，对吗？

picosam 于 2017-06-02

🎉1

@picosam我想是的，但是还没有尝试过

andorfermichael 于 2017-06-02

@andorfermichael这是一项了不起的工作👍
但我面临一个小问题

我需要通过单击信息窗口重定向到另一条路线，但是信息窗口没有单击事件。所以我改用了“ closeclick”事件，这是代码

infowindow.addListener('closeclick', function () { this.router.navigate(['/blabla', id]); });

一切正常，但是当我单击“信息窗口”关闭按钮时，会调用该事件，但会引发错误
this.router is undefined

_当然，路由器库是导入的，并且路由器是在构造函数中定义的_

我尝试了另一种技术，我在父组件和指令之间使用了eventemitter（输入/输出技术）。
我在顶部将@Output() eventEmitter = new EventEmitter()定义为一个类变量，
而事件在同一地点，

infowindow.addListener('closeclick', function () { this.eventEmitter(id); });

同样，一切正常，但是当我单击“信息窗口”关闭按钮时，会调用该事件，但会引发错误
this.eventEmitter is undefined

有没有解决此问题的方法？

hossam-maurice-zz 于 2017-06-08

@ hossam-maurice我想错误是由this 。您案例中的this是触发事件的元素-信息窗口。因此，ES6 / ECMAScript2015中引入了箭头功能。使用箭头函数this并不取决于函数的调用方式，而是取决于周围的范围。
因此， infowindow.addListener('closeclick', () => { this.eventEmitter(id); });应该适合您。

有关更多参考，请参见： ExploringJS-箭头函数和MDN-箭头函数

andorfermichael 于 2017-06-09

👍2

@andorfermichael非常感谢，它确实起作用了：D👍

hossam-maurice-zz 于 2017-06-09

🎉1

您好，我使用了来自Google驱动器的自定义标记群集，并且工作正常。
现在我确实有一个问题，我需要单击一个标记并打开一个引导程序模态。但是我真的不知道我该怎么做。我试图在单击时使用事件侦听器并显示警报，但它确实有效，但是我真的不知道如何弹出引导程序模式。有任何想法吗？

谢谢：）

joaolbaptista 于 2017-07-19

您好，我在信息窗口中添加了一个按钮，但是我无法捕获click事件。您对如何执行操作有任何想法吗？

AlexisNi 于 2017-07-28

@andorfermichael
嗨，谢谢您的解决方案。您还可以根据其中的标记来帮助更改群集的颜色吗？如红色，黄色和蓝色。
亲切的问候

vugar005 于 2017-08-15

@ vugar005我不完全了解您通过更改颜色表示的意思。您可以根据需要简单地更改集群的映像。据我所知，Google的标记簇库提供了五张不同的图像，名称分别为m1到m5（m =默认值），这些图像随着每个簇标记数量的增加而使用。我不知道确切的阈值。有关更多信息，请访问Google Developers MapsDocumentation 。因此，我建议创建五个具有不同颜色的图像，并将它们命名为cluster1到cluster5并将它们放置在assets文件夹中。

andorfermichael 于 2017-08-15

@AlexisNi，您可以尝试在infoWindow上监听domready事件，当

包含InfoWindow内容的内容已附加到DOM。

google.maps.event.addListener(infoWindow, 'domready', function() {
  document.getElementById('info-window-button').addEventListener('click', function(){
    // run code here
  });
});

有关更多信息，请查看Google Developers Maps Documention

andorfermichael 于 2017-08-15

@joaolbaptista很抱歉，但是我认为即使与Google Maps标记结合使用，您对Bootstrap的问题也离题。我建议在stackoverflow上问同样的问题（稍微详细一点）；）

andorfermichael 于 2017-08-15

@andorfermichael实际上，我的意思是根据集群中标记的数量更改图标。因此，这就是为什么我切换到本地Google Web API的原因。希望角度图将来会提供群集服务。
还是要谢谢你

vugar005 于 2017-08-15

@ vugar005这就是我想要解释的。甚至本地的Google Maps API也仅提供五种不同图像的可能性。当达到特定阈值（例如cluster1（m1）0-10，cluster2（m2）11-100等）时，将显示这些图像中的每个图像。

andorfermichael 于 2017-08-16

您好@andorfermichael ，您可能有任何想法，为什么升级软件包后突然出现此错误：

ReferenceError: MarkerClusterer is not defined
    at SafeSubscriber._next (marker-clusterer.ts:106)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at SkipWhileSubscriber.webpackJsonp.../../../../rxjs/operator/skipWhile.js.SkipWhileSubscriber._next (skipWhile.js:52)
    at SkipWhileSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at TakeSubscriber.webpackJsonp.../../../../rxjs/operator/take.js.TakeSubscriber._next (take.js:80)
    at TakeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at AsyncAction.webpackJsonp.../../../../rxjs/observable/IntervalObservable.js.IntervalObservable.dispatch (IntervalObservable.js:70)

picosam 于 2017-08-17

@picosam 。我以前有这个问题。问题是您没有导入masterclusterer js文件，或者代码在导入masterclusterer js文件之前使用Masterclusterer。

vugar005 于 2017-08-17

非常感谢@ vugar005-事实是，我已经有一段时间没有触摸过该代码了！ .js文件包含在我的.angular-cli.json ，这确实是我的.ts文件中没有import * as ...语句。当然，当我尝试手动添加import语句时，出现了一个错误，即不允许使用.js扩展名！

picosam 于 2017-08-18

@picosam不客气。很高兴为您提供帮助。

vugar005 于 2017-08-18

可通过新的@ agm / js-marker-clusterer软件包（＃1044）使用此功能。

SebastianM 于 2017-08-25

👍4 🎉1

@SebastianM感谢您在angular-google-maps中使用此功能。我正在尝试使click事件在集群的单击上起作用，目前看来它不可用。任何解决方法都一样吗？

@andorfermichael您的例子看起来很棒！感谢您提供该示例。在您的示例中，我试图通过索引页面包括google maps api，但是我不断遇到诸如找不到google或找不到标记聚类器等错误。有什么想法吗？

narendra-agashe 于 2017-12-13

@jpcode嗨，谢谢您的解决方案，它可以正常工作，但是问题是，如果我使用指令，则无法控制我们在agm-marker中拥有的其余小结。有什么办法可以将其添加到agm-marker？或在指令上添加我们在agm-marker中具有的事件？

matishw 于 2018-01-10

Angular-google-maps: 如何使用标记群集器？

最有用的评论

所有76条评论

相关问题