fusiontable的自定义信息窗口;绑定问题 - 未定义 属性
Custom infowindow for fusiontable; binding issue - undefined property
我正在使用 Derek Eder 的融合 table 模板:https://github.com/derekeder/FusionTable-Map-Template/
很棒的东西,我已经能够添加各种 kml 图层和过滤器等。但是它已经到了我想要添加自定义 google 地图信息 windows 而不是的地步默认融合 table 的。
https://plnkr.co/edit/PF4AXXCefoWSbKoYcL9I?p=preview
上面的 plunker(主要是去除了功能等)展示了我是如何尝试添加自定义信息的 window。它位于 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 acc to console 中捕获的错误是
"Uncaught TypeError: Cannot read property '__e3_' of undefined"
据我了解,在这种情况下 "undefined" 很可能是绑定引起的错误。
对于 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);
};
到目前为止一切顺利,但是我现在想添加我的信息window...
google.maps.event.addListener(self.searchrecords, 'click', function(e) {e.infoWindowHtml = "Name" + e.row['Name'].value;}
);
google.maps.event.addDomListener(window, 'load', initialize);
我再次收到 "Cannot read property '__e3_' of undefined" 错误。我认为这是关于 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);
})};
终于可以使用上面的方法了!
我正在使用 Derek Eder 的融合 table 模板:https://github.com/derekeder/FusionTable-Map-Template/
很棒的东西,我已经能够添加各种 kml 图层和过滤器等。但是它已经到了我想要添加自定义 google 地图信息 windows 而不是的地步默认融合 table 的。
https://plnkr.co/edit/PF4AXXCefoWSbKoYcL9I?p=preview
上面的 plunker(主要是去除了功能等)展示了我是如何尝试添加自定义信息的 window。它位于 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 acc to console 中捕获的错误是 "Uncaught TypeError: Cannot read property '__e3_' of undefined"
据我了解,在这种情况下 "undefined" 很可能是绑定引起的错误。 对于 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);
};
到目前为止一切顺利,但是我现在想添加我的信息window...
google.maps.event.addListener(self.searchrecords, 'click', function(e) {e.infoWindowHtml = "Name" + e.row['Name'].value;}
);
google.maps.event.addDomListener(window, 'load', initialize);
我再次收到 "Cannot read property '__e3_' of undefined" 错误。我认为这是关于 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);
})};
终于可以使用上面的方法了!