hide marker tooltip when map center changes; when hiding a tooltip, don't remove but detach it, so that when it is shown again, its oxid is still present on its dom element

This commit is contained in:
rlx 2011-11-03 13:59:54 +00:00
parent bf9f14cf03
commit 9a33041ac4
3 changed files with 22 additions and 13 deletions

View file

@ -526,6 +526,11 @@ Ox.Map = function(options, self) {
} }
function centerChanged() { function centerChanged() {
var tooltip = $('.OxMapMarkerTooltip');
if (tooltip.length) {
Ox.print('??', tooltip[0].className, $(tooltip[0]).data('oxid'));
Ox.UI.elements[$(tooltip[0]).data('oxid')].hide();
}
self.center = self.map.getCenter(); self.center = self.map.getCenter();
self.centerChanged = true; self.centerChanged = true;
} }
@ -867,7 +872,6 @@ Ox.Map = function(options, self) {
function mapChanged() { function mapChanged() {
// gets called after panning or zooming // gets called after panning or zooming
Ox.print('mapChanged'); Ox.print('mapChanged');
var bounds;
if (self.boundsChanged) { if (self.boundsChanged) {
var bounds = self.map.getBounds(), var bounds = self.map.getBounds(),
southWest = bounds.getSouthWest(), southWest = bounds.getSouthWest(),

View file

@ -187,7 +187,10 @@ Ox.MapMarker = function(options) {
var offset = that.map.offset(), var offset = that.map.offset(),
xy = that.map.overlayView.getProjection() xy = that.map.overlayView.getProjection()
.fromLatLngToContainerPixel(e.latLng); .fromLatLngToContainerPixel(e.latLng);
that.tooltip.show(offset.left + xy.x - 4, offset.top + xy.y + 20); that.tooltip.show(
offset.left + Math.round(xy.x) - 4,
offset.top + Math.round(xy.y) + 20
);
} }
function mouseout() { function mouseout() {
@ -234,15 +237,17 @@ Ox.MapMarker = function(options) {
function setTooltip() { function setTooltip() {
var country = Ox.getCountryByGeoname(that.place.geoname); var country = Ox.getCountryByGeoname(that.place.geoname);
that.tooltip && that.tooltip.remove();
that.tooltip = Ox.Tooltip({ that.tooltip = Ox.Tooltip({
title: '<img src="' title: '<img src="'
+ Ox.getImageByGeoname('icon', 16, that.place.geoname) + Ox.getImageByGeoname('icon', 16, that.place.geoname)
+ '" style="float: left; margin: 1px 0 1px -1px; border-radius: 4px"/>' + '" style="float: left; margin: 1px 0 1px -1px; border-radius: 4px"/>'
+ '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">' + '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
+ that.place.name + that.place.name
+ (country && country.name != that.place.name ? ', ' + country.name : '') + (country && country.name != that.place.name ? ', ' + country.name : '')
+ '</div>' + '</div>'
}); })
.addClass('OxMapMarkerTooltip');
} }
/*@ /*@

View file

@ -37,10 +37,10 @@ Ox.Tooltip = function(options, self) {
that.animate({ that.animate({
opacity: 0 opacity: 0
}, 250, function() { }, 250, function() {
that.removeElement(); that.detach();
}); });
} else { } else {
that.removeElement(); that.detach();
} }
} }
return that; return that;
@ -58,7 +58,7 @@ Ox.Tooltip = function(options, self) {
self.x = x; self.x = x;
self.y = y self.y = y
} }
$('.OxTooltip').remove(); // fixme: don't use DOM $('.OxTooltip').detach(); // fixme: don't use DOM
that.appendTo(Ox.UI.$body); that.appendTo(Ox.UI.$body);
width = that.width(); width = that.width();
height = that.height(); height = that.height();