我正在使用 jQuery Zoomable map 插件来创建具有两种类型的 map 和图例的 WordPress 网站。目前处于维护模式,尚未向公众开放。我喜欢它的放大和缩小功能。我什至向图例添加了一个触发器,以使图例中的链接触发 map 上的放大和缩小,这与此额外代码一起使用:
jQuery(文档).ready(函数($) { $('#area-one-button').click(function() { $('#area-one').click(); }); });
但我一直遇到问题。经过几次放大和缩小后,有时缩放不再起作用,直到我刷新页面或等待几分钟。当我单击图例中的缩小按钮时,我无法再单击 map 上的可缩放字段,因为它不知何故不知道我缩小了。这就是问题所在。但如何解决这个问题呢?
所有代码文件的链接位于:http://javascript.pastebin.com/qpEHcDts (只能添加一个链接)
最佳答案
在 JavaScript 开发人员的帮助下,我成功地基于 jQuery 插件优化了代码,如下所示:http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps有些。以下是 legend.js 中的代码,用于使某些区域可点击并立即提高可缩放性。
jQuery(document).ready(function ($) {
$('#1-coast-button').click(function() {
$('#1-coast').click();
});
$('#island-1-button').click(function() {
$('#island-1').click();
});
$('#water-button').click(function() {
$('#water').click();
});
$('#2-coast-button').click(function() {
$('#2-coast').click();
});
});
在一个 map 页面上加载的基本代码本身相当大,但以下是在一个 .html map 页面上通过代码加载的弹出窗口之一:
<a href="javascript:void(0)" id="dean-smith" class="bullet" rel="441-342"> </a>
<div class="popup" id="dean-smith-box">
<h3>Royal X Resort</h3>
<div class="popupcontent">
<p>Text</p>
</div>
<a class="close" href="javascript:void(0)"></a>
</div>
map 现在加载得更好,客户非常满意。
关于javascript - jQuery 缩放功能在多次放大和缩小后失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4544575/