我有一个可缩放地图的代码。适用于FF和Safari等，但在进出各级别一两次后死亡。缩放然后停止运行，链接就会消失。 IE7会持续一段时间，但最终还是会停止工作。很难想象。此代码来自HiFi和Joel Sutherland的插件。我已经在他的博客上留言并向HiFi发送了一封电子邮件，但没有回复，所以我希望有人可以提供帮助。 BHere是主要代码：
/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
* TODO:
* 1. Create API
* 2. Address accesibility automatically
* 3. Make object oriented
*/
(function($) {
$.fn.zoommap = function(settings) {
settings = $.extend({
zoomDuration: 1000,
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
showReturnLink: true,
returnId: 'returnlink',
returnText: 'Return to Previous Map'
}, settings);
$(this).each(function(){
var map = $(this);
$(this).data('currentId', '');
function showMapById(id){
var region = findRegion(settings.map, id);
if(region != -1){
displayMap(region);
}
}
// recursive id find
function findRegion(root, id){
if(root.id == id){
return root;
}else{
if(root.maps != undefined){
for(var i=0; i<root.maps.length; i++){
var possible = findRegion(root.maps[i], id);
if(possible != -1)
return possible;
}
}
}
return -1;
}
// region is a map
// This gets called every time we zoom
function displayMap(region){
//Set Current Region Id
$(this).data('currentId', region.id);
//Clear the Map and Set the Background Image
map.empty().css({
backgroundImage: 'url(' + region.image + ')',
width: settings.width,
height: settings.height
});
var check = map.css('background-image');
//Load RegionData
loadRegionData(region);
}
/************************************************************************************/
//Show Return Link
function showReturnLink(region){
map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
$('#' + settings.returnId).hide().fadeIn().click(function(){
showMapById(region.parent);
});
}
//Load the Bullets
function loadRegionData(region){
var url = region.data;
map.load(url, {}, function(){
//place bullets
$(this).children('a.bullet').each(function(){
var coords = $(this).attr('rel').split('-');
$(this).css({left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset))})
.hide()
.click(function(){showPopup($(this).attr('id'));})
.fadeIn('fast');
});
//Set up each submap as an item to click
if(region.maps != undefined){
for(var i=0; i<region.maps.length; i++){
addZoom(region.maps[i]);
}
}
//Create Return Link
if(settings.showReturnLink && region.parent != undefined){
showReturnLink(region);
}
});
}
function showPopup(id, leftbul, topbul){
map.find(settings.popupSelector).fadeOut();
var boxid = '#' + id + '-box';
$(boxid).fadeIn();
$(settings.popupCloseSelector).click(function(){
$(this).parent().fadeOut();
});
}
//add a clickable image for a region on the current map
function addZoom(region){
$('<img />').addClass(settings.zoomClass)
.attr({
src: settings.blankImage,
id: region.id
}).css({
position: 'absolute',
width: region.width,
height: region.height,
top: region.top,
left: region.left,
cursor: 'pointer'
}).appendTo(map).click(function(){
//hide neighboring bullets and zoomables
var width = settings.width;
var height = settings.height;
if(region.scan){
width = region.scanwidth;
height = region.scanheight;
}
$(this).siblings().fadeOut();
$(this).hide()
.attr('src', region.image).load(function(){
$(this).fadeIn('slow')
.animate({
width: width,
height: height,
top: '0px',
left: '0px'
}, settings.zoomDuration, '', function(){
displayMap(region);
});
});
});
}
function rempx(string){
return Number(string.substring(0, (string.length - 2)));
}
function addpx(string){
return string + 'px';
}
function showHash(string){
string = string.replace('#', '');
showMapById(string);
}
//initialize map
var hash = self.document.location.hash;
if(hash.length > 0)
showHash(hash);
else{
displayMap(settings.map);
}
return this;
});
}
})(jQuery);
还有一个设置文件：
$(document).ready(function(){
/* Show jQuery is running */
$('h1').css({textDecoration: 'underline'});
$('#map').zoommap({
// Width and Height of the Map
width: '697px',
height: '415px',
//Misc Settings
blankImage: '/assets/images/map/blank.gif',
zoomDuration: 1000,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',
//Return to Parent Map Link
showReturnLink: true,
returnId: 'returnlink',
returnText: 'return to previous map',
//Initial Region to be shown
map: {
id: 'world',
image: '/assets/images/map/continents.jpg',
data: '/assets/popups/world.html',
maps: [
{
id: 'africa',
parent: 'world',
image: '/assets/images/map/africa2.jpg',
data: '/assets/popups/africa.html',
width: '156px',
height: '148px',
top: '188px',
left: '270px',
maps: [
{
id: 'ethiopia',
parent: 'africa',
image: '/assets/images/map/ethiopia.jpg',
data: '/assets/popups/ethiopia.html',
width: '79px',
height: '47px',
top: '150px',
left: '425px'
}
]
},
{
id: 'asia',
parent: 'world',
image: '/assets/images/map/asia2.jpg',
data: '/assets/popups/asia2.html',
width: '302px',
height: '198px',
top: '50px',
left: '380px',
maps: [
{
id: 'nepal',
parent: 'asia',
image: '/assets/images/map/nepal-india.jpg',
data: '/assets/popups/nepal.html',
width: '66px',
height: '88px',
top: '265px',
left: '208px'
},
{
id: 'phillippines',
parent: 'asia',
image: '/assets/images/map/phillippines.jpg',
data: '/assets/popups/philippines.html',
width: '40px',
height: '54px',
top: '310px',
left: '350px'
}
]
}
]
}
});
});
第二位设置各种地图及其兄弟姐妹。
正如我所说，它在FF和Safari中运行良好，但只是在IE中死掉。
非常感谢所有帮助。
戴夫
答案 0 :(得分：5)
这是Joel - 该插件的作者。
它不起作用，因为它取决于'load'事件正确触发 - IE并不总是这样做。我会在某个时候发布一项改进。
在此之前，只需使用帖子评论中提供的解决方案： http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps#comment-497ea133d5f642b4a375d18d421c0bc0