Получение идентификатора функции в угловом событии LayerClick на уровне карт Google - PullRequest
Новая
       45

Получение идентификатора функции в угловом событии LayerClick на уровне карт Google

0 голосов
/ 29 октября 2019

Я успешно добавил файл GeoJSON в слой данных приложения angular-google-maps и хотел бы иметь возможность доступа к свойствам и идентификатору функции, когда пользователь нажимает на один изполигоны нарисованы на этом слое. Тем не менее я получаю сообщение об ошибке при попытке получить доступ к свойству feature аргументов layerClick.

Вот краткий пример, обобщающий проблему:

home.component.html: 

<agm-map [latitude]="latitude" [longitude]="longitude">
  <agm-data-layer [geoJson]="geoJson" [style]="styleFunc" (layerClick)="onClick($event)"></agm-data-layer>
</agm-map>

home.component.ts : 

export class HomeComponent {
    latitude: number = 5;
    longitude: number = 5;
    zoom: number = 4;
    geoJson = JSON.parse(`
    {
      "type": "FeatureCollection",
      "features": [{
          "type": "Feature",
          "id": 10,
          "geometry": {
            "type": "Polygon",
            "coordinates": [[[1.0, 1.0], [1.0, 10.0], [10.0, 10.0], [10.0, 1.0], [1.0, 1.0]]]
          },
          "properties": {
            "name": "Alpha",
            "color": "#FF0000"
          }
        }, {
          "type": "Feature",
          "id": 20,
          "geometry": {
            "type": "Polygon",
            "coordinates": [[[11.0, 11.0], [11.0, 20.0], [20.0, 20.0], [20.0, 11.0], [11.0, 11.0]]]
          },
          "properties": {
            "name": "Bravo",
            "color": "#0000FF"
          }
        }]
    }`);

    styleFunc(feature: any): any {
        return ({
            clickable: true,
            fillColor: feature.getProperty('color'),
            strokeWeight: 1
        });
    }

    onClick(clickEvent: DataMouseEvent): void {
        console.log('Click Event Detected');
        console.log(clickEvent.latLng.toString());
        console.log(clickEvent.feature.id);
        console.log(clickEvent.feature.properties.name);
    }

Карта отображает и раскрашивает полигоны, как и ожидалось:

Map Working Correctly

Однако при нажатии на одну из заштрихованных областей я получаю следующую ошибку (пример ниже для красной области):

Error Message

Я использую @agm/core версию "~1.0.0-beta.7" и Angular 8.2, работающую в приложении ASP.Net Core 3.0.

ОБНОВЛЕНО 10/29/ 19

В соответствии с вопросом, приведенным ниже, я попытался изменить следующее: 

    onClick(clickEvent: DataMouseEvent): void {
        console.log('Click Event Detected');
        console.log(clickEvent.latLng.toString());
        console.log(clickEvent.feature.getId());
        console.log(clickEvent.feature.getProperty('name'));
    }

После внесения этих изменений IntelliSense сообщил об ошибке как в getId (), так и в getProperty (). говоря, что эти свойства не существуют. Проект построен без ошибок, но я получил ошибку 404 при запуске и следующую ошибку в окне вывода:

Microsoft.AspNetCore.SpaServices: Ошибка: ОШИБКА в src / app / home /home.component.ts (51,40): ошибка TS2339: свойство 'getId' не существует для типа 'Feature'. src / app / home / home.component.ts (52,40): ошибка TS2339: свойство 'getProperty' не существует для типа 'Feature'.

1 Ответ

1 голос
/ 29 октября 2019

Вы можете использовать функции getId() + getProperty('propName') для получения идентификатора и реквизитов: 

onClick(clickEvent): void {
    console.log('Click Event Detected');
    console.log(clickEvent);
    console.log(clickEvent.latLng.toString());
    console.log(clickEvent.feature);

    console.log(clickEvent.feature.getId());
    clickEvent.feature.forEachProperty(p =>{
      console.log(p);
    });
    console.log(clickEvent.feature.getProperty("name"));
    console.log(clickEvent.feature.getProperty("color"));
}

См. Документация Google Maps : 

var ascii = feature.getProperty('ascii');
...