1

インフォボックスを利用しています。すべてのマーカーをロードし、各インフォボックス内に異なるコンテンツをロードして、「適切に」トリガーすることができます。次に、問題を開始します。

1) デスクトップ/iOS では、2 回目のクリック後にトグル イベントが機能します。基本的に、divを上下に移動します。以下のコードを参照してください。

//Setting up the marker
 var marker = new google.maps.Marker({
                 map: map,
                 draggable: false,
                 position: latlng6,
                 visible: true
                });

                var boxText = document.createElement("div");
                boxText.class = "test";
                boxText.style.cssText = "height: 0px;";
                boxText.innerHTML =  "<div id='top'><p>SUSSAN</p><a href='#' class='info'>+ info</a>" 
                                    + "<h2></h2>"
                                    + "</div>" 
                                    + "<div id='promo'>"
                                    + "<div class='badge'>"
                                    + "<img src='hot@2x.png'>"
                                    + "</div>"
                                    + "<p>TODAY UP TO 70% OFF</p>"
                                    + "</div>";



                var myOption = {
                         content: boxText
                        ,disableAutoPan: false
                        ,maxWidth: 0
                        ,pixelOffset: new google.maps.Size(-128, -161)
                        ,zIndex: null
                        ,boxStyle: { 
                          background: "url('') no-repeat"
                          ,opacity: 1
                          ,width: "280px"
                          ,height: "0px"

                         }
                        ,closeBoxMargin: "36px 25px 0px 0px"
                        ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                        ,infoBoxClearance: new google.maps.Size(1, 1)
                        ,isHidden: false
                  ,zIndex: 999999
                        ,pane: "floatPane"
                        ,enableEventPropagation: false
                };

                var ib = new InfoBox(myOption);
                boxList.push(ib);



//ANIMATE MORE INFO  
         google.maps.event.addDomListener(boxList[i].content_,'click', function() {

             $("#promo").toggle( function(a) {
             $("#top").animate({top: 14}, 200)},
             function() {
             $("#top").animate({top: 50}, 200);;

          });

2) iOS では、最初の問題があっても、最初に div の「プロモーション」を「タップ」すると、Infobox が消えますが、デスクトップでは発生しません。戻ったら、もう一度インフォボックスを開いて、div "promo" をタップすると、デスクトップとして機能します。この2番目の問題は最初の問題に関連していると思います。しかし、なぜそれがiOSで起こるのかはわかりません. =/助けに感謝します。

実際の例を参照してください http://www.clickin.com.au/fashion/hottie4.html

4

1 に答える 1

1

iOSの問題については何も言えませんが、最初の問題に関しては：

トグル ハンドラーは最初のクリックの後にアタッチされるため、最初のクリックでトグル イベントをトリガーすることはできません。

最初のクリックを待つ代わりに、トグルを直接アタッチすることができます (boxList[i].content_ の現在のクリック ハンドラーを次のコードに置き換えます)。

$("#promo",boxList[i].content_)
                .toggle( 
                  function(a) {
                    $("#top").animate({top: 14}, 200);
                  },
                  function() {
                    $("#top").animate({top: 50}, 200);
              });
于 2013-01-20T14:26:45.053 に答える