可融合的自定义信息窗口;绑定问题-未定义的属性

Custom infowindow for fusiontable; binding issue - undefined property

本文关键字：问题 绑定 未定义 属性 窗口 融合 自定义 信息 信息窗      更新时间：2023-09-26

我使用Derek Eder的融合表模板：https://github.com/derekeder/FusionTable-Map-Template/

很棒的东西，我已经能够添加各种kml层和过滤器等。然而，我已经到了想要添加自定义谷歌地图信息窗口而不是默认的融合表窗口的地步。

https://plnkr.co/edit/PF4AXXCefoWSbKoYcL9I?p=preview

上面的plunker(大部分去掉了功能等(显示了我是如何尝试添加自定义信息窗口的。它可以在js/maps_lib.js的第106:111行找到。

google.maps.event.addListener(self.searchrecords), 'click', function() {
    infowindow.setContent('<b>hello</b>');
    infowindow.open(self.map, self.searchrecords);
};
google.maps.event.addDomListener(window, 'load', initialize);

版本2的plunker工作(没有上面的代码(。我在V3 acc到控制台中发现的错误是"未捕获类型错误：无法读取未定义"的属性'__e3_'

根据我的理解，在这种情况下，"未定义"很可能是绑定导致的错误。为了var self=this，我添加了以下内容：

this.infowindow = new google.maps.InfoWindow(
{ content: '<b>hello</b>'}
);

第93:95行。

我怀疑我需要在某个地方使用原型，但我不确定如何实现它。我已经阅读了以下关于绑定的内容：http://alistapart.com/article/getoutbindingsituations但仍然被卡住了。

//编辑

MapsLib.prototype.submitSearch = function(whereClause, map) {
    var self = this;
    //get using all filters
    //NOTE: styleId and templateId are recently added attributes to load custom marker styles and info windows
    //you can find your Ids inside the link generated by the 'Publish' option in Fusion Tables
    //for more details, see https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles
    self.searchrecords = new google.maps.FusionTablesLayer({
      suppressInfoWindows: true,
      query: {
        from: self.fusionTableId,
        select: self.locationColumn,
        where: whereClause
      },
      styleId: 2,
      templateId: 2
    });
    self.fusionTable = self.searchrecords;
    self.searchrecords.setMap(map);
    self.getCount(whereClause);
  };

到目前为止还不错，不过我现在想添加我的信息窗口。。。

google.maps.event.addListener(self.searchrecords, 'click', function(e) {e.infoWindowHtml = "Name" + e.row['Name'].value;}
    );
    google.maps.event.addDomListener(window, 'load', initialize);

我再次得到"无法读取未定义的属性'__e3_'"错误。我认为这是一个关于self.searchrecords的错误…

MapsLib.prototype.submitSearch = function(whereClause, map) {
    var self = this;
    self.searchrecords = new google.maps.FusionTablesLayer({
      suppressInfoWindows: true,
      query: {
        from: self.fusionTableId,
        select: self.locationColumn,
        where: whereClause
      },
      styleId: 2,
      templateId: 2
    });
    self.fusionTable = self.searchrecords;
    self.searchrecords.setMap(map);
    self.getCount(whereClause);
    google.maps.event.addListener(self.searchrecords, 'click', function(e) {
    if(self.infowindow) self.infowindow.close();
    else self.infowindow = new google.maps.InfoWindow();
    self.infowindow.setContent(
    '<div class="tabs">' +
    '<ul>' +
    '<li><a href="#tab-1"><span>Building</span></a></li>' + //tab name
    '</ul>' +
    '<div id="tab-1">' + //first tab content
    '<p>Viewing data from: <b>'+ e.row['Last Modified'].value + '</b></p>' +
    '</div>'
    );
    self.infowindow.setPosition(e.latLng);
    self.infowindow.open(map);
  })};

终于和上面的一起工作了！

相关文章：