0

私はウェブデザインの初心者であり、どん底に突き落とされています。この 2 週間で、マップ外のリンクをクリックするとマーカーと情報ウィンドウがポップアップするカスタム Google マップを作成することができました。

----- 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を使用する別のスクリプトを使用して、クリックしたリンクからページをマップに移動するアニメーション視差スクロールを実装する別のスクリプトと組み合わせようとしています。これも機能しますが、マーカー + 情報ウィンドウのポップアップは発生しません。必要なのは、スクロールが終了した後にポップするマーカー + 情報ウィンドウです。

----- 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>

私が理解している限りでは、同じクリック イベントが 2 つの異なるイベントを同時にトリガーしています。1 つは triggerClick 関数から、もう 1 つは 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 に答える