Question

我是网页设计的绝对重要人物，已被抛到了深渊。在过去的两周里，我设法整理了一个自定义谷歌地图，点击地图外的链接时会弹出标记和信息窗口。

----- map.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的脚本将页面从点击的链接移动到地图。这也有效，但标记+ infowindow弹出窗口无法发生。我需要的是在滚动结束后弹出标记+ infowindow。

----- scripts.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函数。

我已经寻找了几天的解决方案，并尝试了很多东西，特别是回调（），但处理单独的脚本超出了我的大脑。有人可以帮我一把。

谢谢！

Answer 1

使用回调你是在正确的轨道上。滚动完成后，您需要触发标记点击。如果您面临的问题是您的脚本正在隐藏彼此的功能，请创建一个全局应用程序对象并将所需的功能放在那里。您还需要从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
});

来自单独脚本函数的相同点击触发的冲突事件

1 个答案: