Question

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

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

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);

plunker的第2版工作（没有上面的代码）。我在V3中遇到的错误是控制台＆＃34;未捕获的TypeError：无法读取属性＆＃39; __ e3 _＆＃39;未定义＆＃34;

根据我的理解＆＃34; undefined＆＃34;在这种情况下，很可能是归因于绑定的错误。 to 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);

我再次得到＆＃34;无法读取属性＆＃39; __ e3 _＆＃39;未定义＆＃34;错误。我认为这是关于self.searchrecords的错误......

Answer 1

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);
  })};

最后让它与上面一起工作！

定制infowindow可融合;绑定问题 - 未定义的属性

1 个答案: