0

我是网页设计中的绝对大佬，已经深陷其中。在过去的两周里，我设法制作了一个自定义的谷歌地图，当点击地图外的链接时，会弹出标记和信息窗口。

----- 地图.js

function triggerClick(id) {
  google.maps.event.trigger(gmarkers[id],"click")
};

function createMarker(latlng, html, id) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map,marker);
    });
    gmarkers[id] = marker;
}

现在我正在尝试将它与另一个脚本结合起来，该脚本实现了一个动画视差滚动，将页面从点击的链接移动到地图，使用另一个使用 jquery 的脚本。这也有效，但标记+信息窗口弹出失败。我需要的是在滚动结束后弹出的标记+信息窗口。

----- 脚本.js

jQuery(document).ready(function ($) {

    $(window).stellar();

    var chartLink = $('.chart').find('li');
    slide = $('.slide');
    htmlbody = $('html,body');

    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }
    chartLink.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

});

我试图定位的 HTML 链接是：

----- index.html

<ul class="chart">
<li>
  <a data-slide="3" href="javascript:triggerClick('bond')">Bond Street</a></li>
  <li><a data-slide="3" href="javascript:triggerClick('barbican')">Barbican</a>
</li>
</ul>

据我了解，同一个点击事件同时触发两个不同的事件，一个来自 triggerClick 函数，另一个来自 goToByScroll 函数。

几天来我一直在寻找解决方案并尝试了很多东西，特别是 callback()，但处理单独的脚本超出了我的大脑。谁能帮我一把。

谢谢！

4

1 回答 1

0

使用回调，您走在正确的轨道上。您需要在滚动完成后触发标记单击。如果您面临的问题是您的脚本相互隐藏功能，请创建一个全局应用程序对象并将所需的功能放置在其中。您还需要从 href 属性中删除 javascript 并将其替换为具有相应 id 的另一个数据属性。

<ul class="chart">
  <li><a data-slide="3" data-id="bond">Bond Street</a></li>
  <li><a data-slide="3" data-id="barbican">Barbican</a></li>
</ul>

创建一个应用程序范围的对象来存储函数

window.myapp = {};

将 triggerClick 函数添加到此对象

myapp.triggerClick = function(){...};

现在通过使用回调在动画完成后调用此函数

function goToByScroll(data) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + data.slide + '"]').offset().top
    }, 2000, 'easeInOutQuint', function() {
        myapp.triggerClick(data.id);
    });
}
chartLink.click(function (e) {
    e.preventDefault();
    goToByScroll($(this.data()); // use jquery to grab all the data attributes
});
于 2013-06-08T02:39:14.207 回答