Question

我需要一些帮助来理解我无法获得的.bind函数工作。我有jqtouch谷歌地图示例，可以正确获取并显示地图在与其余代码相同的页面中的div中。好！

用于绑定map div的代码如下所示：

    $('#map').bind('pageAnimationEnd', function(event, info){ 
        if (info.direction == 'in') { 
            localiser(); 
        } 
    });

但是现在我试图将地图div放在一个单独的html页面中使用jqtouch加载。单独的页面正在加载，但地图不是显示。所以我必须改变绑定，我尝试了很多不同的东西事情，但不能让它工作。

我读到你也可以使用.live而不是.bind和.live 即使在dom编译完所有内容之后，它仍在工作，所以它更好也许可以使用.live？

有人可以帮助我了解它是如何工作的以及我需要做些什么在加载单独的html页面时要做到这一点。非常感谢！

Answer 1

确保在加载地图的页面后初始化并绑定到地图。

Answer 2

谢谢你们。但我想我就像你说的那样！？这就是为什么我不理解它。这就是googlemap2.asp的样子：

 function localiser() {
            if ($("#map_canvas").html()) return;

            if ((window.orientation == (-90)) || (window.orientation == (90))) {
                var width = 520; var height = 285;
                $('#map_canvas').css("width",width+"px");
                $('#map_canvas').css("height",height+"px");
                $('#map-overflow').css("width",(width-40)+"px");
                $('#map-overflow').css("height",(height-10)+"px");
            } else {
                var width = 360; var height = 435;
                $('#map_canvas').css("width",width+"px");
                $('#map_canvas').css("height",height+"px");
                $('#map-overflow').css("width",(width-40)+"px");
                $('#map-overflow').css("height",(height-10)+"px");
            }

            var myLatlng = new google.maps.LatLng(57.127426175, 12.26577967);
            var myOptions = {
              zoom: 16,
              center: myLatlng,
              disableDefaultUI: true,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
           var image = new google.maps.MarkerImage("info.png",new google.maps.Size(32, 37));
            var shadowi = new google.maps.MarkerImage("shadow.png",new google.maps.Size(51, 37));
              var myLatLng = new google.maps.LatLng(57.127426175, 12.26577967);
              var beachMarker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                        shadow: shadowi,
                  icon: image
              });
        }

 jQT = new $.jQTouch({
        });

        $(document).ready(function(e){
            $(function(){
                $('body').bind('turn', function(event, info){
                    var curr = $(".current").attr("id");
                    switch (curr) {
                    case "map"       :
                      if (info.orientation == "landscape") {
                          var width = 520; var height = 285;
                          $('#map_canvas').css("width",width+"px");
                          $('#map_canvas').css("height",height+"px");
                          $('#map-overflow').css("width",(width-40)+"px");
                          $('#map-overflow').css("height",(height-10)+"px");
                      } else {
                          var width = 360; var height = 435;
                          $('#map_canvas').css("width",width+"px");
                          $('#map_canvas').css("height",height+"px");
                          $('#map-overflow').css("width",(width-40)+"px");
                          $('#map-overflow').css("height",(height-10)+"px");
                      }
                      break;
                   }
                });
            });
            $('#map').live('pageAnimationEnd', function(event, info){
                if (info.direction == 'in') {
                    localiser();
                }
            });
        });

我加载的单独页面（googlemap3.asp）如下所示：

<div id="map" class="notransform">
            <div class="toolbar">
                <h1>Map demo</h1>
                <a href="#" class="back">Back</a>
            </div>

       <div id="map-container" class="notransform">
                <div id="map_text">This is my location</div>

                <div id="map-overflow" style="overflow: hidden; padding: 0; border: 0;" class="notransform">
                    <div id="map_canvas" style="margin-left: -20px; margin-top: -20px;" class="notransform"></div>
                </div>
       </div>
 </div>

如果我在googlemap2.asp而不是googlemap3.asp中有上述div，那么它可以正常工作！我真的希望你知道什么是错的，因为我不： - ）

帮助绑定功能？

2 个答案: