Как добавить событие нажатия на кнопку, которая добавлена ​​в информационное окно Google Maps в угловых? - PullRequest
Новая
       27

Как добавить событие нажатия на кнопку, которая добавлена ​​в информационное окно Google Maps в угловых?

0 голосов
/ 28 июня 2019

Я создал информационное окно на картах Google и хочу добавить кнопку в это информационное окно, поэтому я использовал следующий код: 

InitializeMap() {
this.map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: { lat: 18.519834, lng: 73.857944 },
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
this.ShowCoordinates();
}

ShowCoordinates() {
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < this.InputModel.length; i++) {
  var Consumer = this.InputModel[i];
  var marker = new google.maps.Marker({
    position: { lat: parseFloat(Consumer.Latitude), lng: parseFloat(Consumer.Longitude) },
    map: this.map,
    title: Consumer.ConsumerName
  });

  (function (marker, Consumer) {
    google.maps.event.addListener(marker, "click", function (e) {
      infowindow.setContent(
        '<div>' +
        '<table id="tbl">' +
        '<tr><th>Cons. No.</th><td>' + Consumer.ConsumerNo + '</td></tr>' +
        '<tr><th>Name</th><td>' + Consumer.ConsumerName + '</td></tr>' +
        '<tr><th>Area</th><td>' + Consumer.AreaName + '</td></tr>' +
        '<tr><th>Address</th><td>' + Consumer.ConsumerAddress + '</td></tr>' +
        '<tr><th>Mob. No</th><td>' + Consumer.MobileNo + '</td></tr>' +
        '<tr><td colspan="2"><button onclick = "Test()">Test</button></td></tr>' +
        '</table></div>');
      infowindow.open(this.map, marker);
    });
  })(marker, Consumer);
}
}

Test() {
alert('Hiiii');
}

Теперь я хочу вызвать функцию Test () по нажатию кнопки, но онане вызывал функцию Произошла следующая ошибка: 

Uncaught ReferenceError: Test is not defined

Есть ли способ добиться этого?

1 Ответ

0 голосов
/ 28 июня 2019

Попробуйте этот код 

InitializeMap() {
    this.map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: { lat: 18.519834, lng: 73.857944 },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    this.ShowCoordinates();
    }

    ShowCoordinates() {
    var infowindow = new google.maps.InfoWindow();
    for (var i = 0; i < this.InputModel.length; i++) {
      var Consumer = this.InputModel[i];
      var marker = new google.maps.Marker({
        position: { lat: parseFloat(Consumer.Latitude), lng: parseFloat(Consumer.Longitude) },
        map: this.map,
        title: Consumer.ConsumerName
      });

      (function (marker, Consumer) {
        google.maps.event.addListener(marker, "click", function (e) {
          infowindow.setContent(
            '<div>' +
            '<table id="tbl">' +
            '<tr><th>Cons. No.</th><td>' + Consumer.ConsumerNo + '</td></tr>' +
            '<tr><th>Name</th><td>' + Consumer.ConsumerName + '</td></tr>' +
            '<tr><th>Area</th><td>' + Consumer.AreaName + '</td></tr>' +
            '<tr><th>Address</th><td>' + Consumer.ConsumerAddress + '</td></tr>' +
            '<tr><th>Mob. No</th><td>' + Consumer.MobileNo + '</td></tr>' +
            '<tr><td colspan="2"><button onclick = "Test()">Test</button></td></tr>' +
            '</table></div> <script>function Test(){ alret("test") }</script>');
          infowindow.open(this.map, marker);
        });
      })(marker, Consumer);
    }
    }
...