Angular2 + Angular Google Maps - настройка кластеров карт, калькулятора и параметров

Мне нужна помощь в реализации MarkerCluster с функцией калькулятора. В основном мне нужно сгруппировать несколько маркеров в кластер и использовать калькулятор для динамического отображения изображений и текста в каждом маркере.

На самом деле моя карта работает, я показываю маркеры и некоторые кластеры, но я не могу настроить MapOptions для определения минимального размера кластера, и я не могу заставить свою функцию калькулятора настраивать изображения в соответствии с моими значениями.

Чтобы представить мою реальную ситуацию и то, что мне нужно, посмотрите это изображение: https://ibb.co/cqkG8S

Изображение, которое заменяет исходное изображение маркеров, разделено на 2 квадрата, первый (зеленый) - это количество элементов, второй (синий или красный) - элементы с проблемами (кластер с проблемами отображается красным квадратом).

На том же изображении у меня есть оригинальные маркеры Google, которые не заменены моими изображениями. В этом случае я считаю, что ClusterOptions не настроен.

Итак, мои проблемы:

  1. Как пользоваться калькулятором
  2. Как установить ClustersOptions

Спасибо за любую помощь!

Мой код:

  1. Объявление моей карты (map.component.html):

    ‹Agm-map [latitude] = lat [longitude] = lng [zoom] = zoom› ‹agm-marker-cluster [styles] = clusterStyles› ‹agm-marker * ngFor = let маркер маркеров [latitude] = marker.latitude [longitude] = marker.longitude ›

  2. Важные части моего компонента (map.component.ts)

    класс экспорта MapComponent реализует OnInit {

     @Input('markers') markers: MapMarker[];

 clusterStyles: ClusterStyle[];
 clusterOptions: ClusterOptions;

 constructor() { }

 ngOnInit(){
     this.clusterStyles = [
         {
             textColor: "#FFFFFF",
             url: "assets/markers/marker1.png",
             height: 36,
             width: 58
         },
         {
             textColor: "#FFFFFF",
             url: "assets/markers/marker2.png",
             height: 36,
             width: 58
         }
     ];

     this.clusterOptions = {
         gridSize: 60,
         minimumClusterSize: 2,
         averageCenter: true
     }
 }

 //Calculate Function - to show image em formatted text
 calculateFunction(markers: MapMarker[], numStyle: number){

     let index: number = 0
     let title: string = "";
     let text: string = "<div style=\"position: relative; top: -4px; text-align: center; margin: 0px auto; width: 60px;\"> <div style=\"display: inline-block; width: 29px;\">{{ELEMENTS}}</div><div style=\"display: inline-block; width: 29px;\">{PROBLEMS}</div></div>";
     let qtdNodes: number = 0;
     let qtdEvents: number = 0;

     for(let i of markers){
         qtdNodes += i.qtdEvents;
         qtdEvents += i.qtdEvents;
     }

     index = (qtdEvents == 0) ? 1 : 2;

     text = text.replace( "{ELEMENTS}", qtdNodes.toString() );
     text = text.replace( "{PROBLEMS}", qtdEvents.toString() );

     return {
         text: text,
         index: index,
         title: title
     }
 }

    }

Версии

angular - 5.2.6 agm core - 1.0.0-beta.2 agm js-marker-clusterterer - 1.0.0-beta.2


google-maps angular markerclusterer angular-google-maps agm
person Leonardo Machado    schedule 09.03.2018    source источник
comment
Вы нашли ответ, который сработал для вас?   -  person Tony Brasunas    schedule 19.01.2021

Ответы (1)


arrow_upward
0
arrow_downward

В вашем HTML вам нужно настроить ваши agm-marker-cluster экземпляры.

Чтобы использовать функцию калькулятора, как здесь, вы указываете свойство calculator:

    <agm-marker-cluster [calculator]="calculateFunction">

А чтобы установить минимальный размер кластера, используйте свойство minimumClusterSize.

Таким образом, вы получите вызов компонента, подобный этому:

    <agm-marker-cluster 
        [calculator]="calculateFunction"
        [minimumClusterSize]="clusterOptions.minimumClusterSize"
        [styles]="clusterStyles">
      <agm-marker>
        ...
      </agm-marker>
    </agm-marker-cluster>

Наконец, в вашем calculateFunction вы правильно обрабатываете входящие параметры, но вы можете оставить title в своем возвращаемом объекте. Так что вы можете просто вернуться вот так:

        ... 

        return {
            text: text,
            index: index,
        }

Надеюсь, это поможет!

Прошло некоторое время с тех пор, как вы опубликовали, так что, возможно, вы уже поняли это, но я все же добавляю этот ответ на случай, если другие придут искать, как это настроить.

person Tony Brasunas    schedule 13.10.2020