Слушатель карт Google неправильно работает в angular2+typescript

Я написал небольшой веб-сайт с html+js+jquery и использовал API карт Google v3. На карте можно нарисовать полилинию, что возможно благодаря обработчикам событий на карте, т.е.

 map.addListener('click', addLatLng);

а также

function addLatLng(event) {
    // Add a new marker at the new plotted point on the polyline.
    polyline.getPath().push(event.latLng);

    var marker = new google.maps.Marker({
        position: event.latLng,
        draggable: true,
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 5
        }
    })

    var i = gmarkers.length;
    marker.addListener('drag', function() {
      polyline.getPath().setAt(i, marker.getPosition());
    });
 ...
}

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

Я могу изменить первую строку на

this.map.addListener('click', (event) => this.addLatLng(event));

и это будет работать по назначению. НО (!)

addLatLng(event) {
    // Add a new marker at the new plotted point on the polyline.
    this.polyline.getPath().push(event.latLng);

    var marker = new google.maps.Marker({
        position: event.latLng,
        draggable: true,
        map: this.map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 5
        }
    })


    var i = this.gmarkers.length;

    marker.addListener('drag', () => function() {
     // this.polyline.getPath().setAt(i, marker.getPosition());
      console.log("drag listening");

    });
  ...
}

не будет работать. Я не понимаю, почему eventlistener можно добавить на карту, но не на маркер на этой карте. Это потому, что новый слушатель добавляется в обработку событий другого элемента? Но если да, то почему он работал на чистом Javascript?


typescript angular addeventlistener google-maps-api-3 dom-events
person Stubbi    schedule 12.05.2016    source источник
comment
Вы получаете сообщение об ошибке или просто не вызывается обработчик события?   -  person Günter Zöchbauer    schedule 12.05.2016
comment
просто не называется   -  person Stubbi    schedule 12.05.2016

Ответы (1)


arrow_upward
3
arrow_downward

Вы перепутали это:

marker.addListener('click', () => function() {
    // this.polyline.getPath().setAt(i, marker.getPosition());
    console.log("drag listening");
});

Это должно быть так:

marker.addListener('drag', () => {
    // this.polyline.getPath().setAt(i, marker.getPosition());
    console.log("drag listening");
});

Эта конструкция

() => {}

является стрелочной функцией. И если нет {}, он просто вернет значение после =>.

Итак, вы создали функцию, которая возвращает функцию.

Дополнительная информация здесь: https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html

person Dinistro    schedule 12.05.2016
comment
ах, вот это фокус! Большое спасибо! КСТАТИ. Это не щелчок, но перетаскивание, конечно, и туда. В вопросе ошибся. - person Stubbi; 12.05.2016