我正在使用Google地图和Infobubble Backbone和CofeeScript。
I am adding markers to a map like this:
plotMarkers: (points) ->
pos = []
markers = []
lats = []
lngs = []
for point in points
lats.push(point[0])
lngs.push(point[1])
latLng = new google.maps.LatLng(point[0], point[1])
icon = new google.maps.MarkerImage(
# MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
'/assets/home_marker.png',
)
content = new google.maps.Marker(
icon: icon
position: latLng
map: @gMap
)
#content["infowindow"] = new google.maps.InfoWindow(content: "hello")
content["infowindow"] = new InfoBubble(
maxWidth: 240
maxHeight: 210
shadowStyle: 1
padding: 0
content: '<div class="tooltip_header">"hey"</div>',
tabPadding: 15
backgroundColor: 'black'
borderRadius: 0
arrowSize: 10
borderWidth: 0
borderColor: '#AB2424'
disableAutoPan: true
hideCloseButton: false
arrowPosition: 0.5
backgroundClassName: 'phoney'
tabClassName: 'tabClass'
activeTabClassName: 'activeTabClass'
arrowStyle: 2
)
google.maps.event.addListener content, 'click', ->
console.log(this["infowindow"])
this["infowindow"].open(@gMap, this)
markers.push(content)
@delegateEvents()
return markers
这是来自Coffee的JS:
({
plotMarkers: function(points) {
var content, icon, latLng, lats, lngs, markers, point, pos, _i, _len;
pos = [];
markers = [];
lats = [];
lngs = [];
for (_i = 0, _len = points.length; _i < _len; _i++) {
point = points[_i];
lats.push(point[0]);
lngs.push(point[1]);
latLng = new google.maps.LatLng(point[0], point[1]);
icon = new google.maps.MarkerImage('/assets/home_marker.png');
content = new google.maps.Marker({
icon: icon,
position: latLng,
map: this.gMap
});
content["infowindow"] = new InfoBubble({
maxWidth: 240,
maxHeight: 210,
shadowStyle: 1,
padding: 0,
content: '<div class="tooltip_header"><h4>Hello</h4></div><div class="tooltip_content"><p>Nunc nec, egestas vel augue rhoncus massa cras, tincidunt a nisi nisi est lundium non sed? Eros pulvinar</p></div> <div id="tooltip_buttons" class="tooltip_buttons"><button class="btn btn-success" id="testdrive">Test Drive</button> <button class="btn btn-warning">Read More</button></div>',
tabPadding: 15,
backgroundColor: 'black',
borderRadius: 0,
arrowSize: 10,
borderWidth: 0,
borderColor: '#AB2424',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 0.5,
backgroundClassName: 'phoney',
tabClassName: 'tabClass',
activeTabClassName: 'activeTabClass',
arrowStyle: 2
});
google.maps.event.addListener(content, 'click', function() {
this["infowindow"].open(this.gMap, this);
return console.log(this["infowindow"]);
});
markers.push(content);
this.delegateEvents();
}
return markers;
}
});
正如您所看到的,我正在为每个标记添加InfoBubble和侦听器事件。
监听器正常工作,因为我可以看到console.log行 - 但是我根本没有对标记进行信息交换。它真的很奇怪。如果我独立于标记加载信息块,它会在地图上加载(如果我给它一个位置)
奇怪的是,当infobubble在控制台中时,我可以看到这一行:
isOpen_: true
这是奇怪的,因为我还没有设置infobubble是开放的,但它是说它是?
我确信您可以看到最终游戏是在鼠标悬停或点击时显示信息。