Google Maps API v3 + jQuery UI标签出现问题 [英] Problems with Google Maps API v3 + jQuery UI Tabs

查看：92
本文介绍了Google Maps API v3 + jQuery UI标签出现问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用Google Maps API在jQuery UI选项卡中呈现地图时，存在许多问题，这些问题似乎相当着名。我见过有关类似问题的发布问题（此处和这里），但那里的解决方案似乎只适用于v2的Maps API。我检出的其他参考文献是 here 和此处 ，以及几乎所有我可以通过谷歌搜索的东西。



我一直在尝试填充地图（使用API​​的v3 ）到混合结果的jQuery选项卡中。我正在使用最新版本的任何东西（目前jQuery 1.3.2，jQuery UI 1.7.2，不知道地图）。



这是标记和放大; javascript： 

 < body> 
< div id =dashtabs> 
< span class =logout> 
< a href =go away>注销< / a> 
< / span> 
<！ -  tabs  - > 
< ul class =dashtabNavigation> 
< li>< a href =＃first_tab>第一个< / a>< / li> 
< li>< a href =＃second_tab>第二个< / a>< / li> 
< li>< a href =＃map_tab>地图< / a>< / li> 
< / ul> 
 
 <！ -   - 标签容器 - > 
< div id =first_tab>这是我的第一个标签< / div> 
< div id =second_tab>这是我的第二个标签页< / div> 
< div id =map_tab> 
< div id =map_canvas>< / div> 
< / div> 
< / div> 
< / body>

和

  $（document）.ready（function（）{
 var map = null; 
 $（'＃dashtabs'）。tabs（）; 
 $（'＃dashtabs' ）.bind（'tabsshow'，function（event，ui）{
 if（ui.panel.id =='map_tab'&&map！
 {
 map = initializeMap （）; 
 google.maps.event.trigger（map，'resize'）; 
} 
}）; 
}）; 
 
函数initializeMap（）{
 //现在只需要一些地图
 var latlng = new google.maps.LatLng（-34.397,150.644）; 
 var myOptions = {
 zoom：8，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
返回新的google.maps.Map（$（'＃map_canvas'）[0]，myOptions）; 
 
 
 
 $ b $ p 
 $ b 
以下是我发现的不适用（用于Maps API v3 ）： b 
 $ b 
     
     
  • 使用jQuery UI选项卡文档中描述的左外技术在我所链接的两个问题的答案中）完全不起作用。实际上，功能最佳的代码使用CSS  .ui-tabs .ui-tabs-hide {display：none; }  
    •  
     
  • 要让地图显示在标签中，唯一的方法是设置的CSS宽度和高度， #map_canvas 为绝对值。将宽度和高度更改为 auto 或 100％会导致地图根本不显示，即使它已经存在已成功呈现（使用绝对宽度和高度）。
     
  • 我无法在Maps API之外的任何位置找到它，但 map.checkResize（）将不再工作。相反，您必须通过调用 google.maps.event.trigger（map，'resize'）来触发resize事件。
    •  
     
  • 如果地图没有在绑定到 tabsshow 事件的函数内部初始化，那么地图本身被正确渲染，但控件不是 - 大多数只是简单地丢失。
    •  
     
 
 
 
所以，以下是我的问题： 
 
 
     
     
  • 任何人都有完成同样壮举的经验？如果是这样，那么您是如何确定实际工作的，因为记录的技巧不适用于Maps API v3？
    •  
     
  • 关于如何根据 jQuery UI文档？我没有机会玩弄它，但我的猜测是，它将打破更多的地图。获得它的机会是多少（或者不值得尝试）？
    •  
     
  • 如何让地图填充最大的可能区域？我希望它能够填充标签并适应页面大小调整，这与在maps.google.com上完成的方式很相似。但是，正如我所说，我似乎坚持只应用绝对宽度和高度的CSS到地图div。
    •  
     
 
 
 
对不起很啰嗦，但这可能是Maps API v3 + jQuery选项卡的唯一文档。干杯！
解决方案
注意：这个答案收到了一个无效的第三方编辑，它基本上取代了它的内容，第三方编辑应该不做。然而，结果可能比原来更有用，所以现在给出两个版本： 
 
 
 
 
 
     
     原作者Anon的版本从2010年开始，经过Anon的一次编辑之后
     
     
     
     google.maps.event.trigger（map，'resize'）; 
     map.setZoom（map.getZoom（））; 
      
     
     
    由
     < a href =http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 =noreferrer> http://code.google.com/p/gmaps- api-issues / issues / detail？id = 1448 作为v $ b的checkResize（）的v3替代品。     
     
     
     Blech  - 不好的谷歌，不cookie。 
     
     
     
     
     
       
       
    • 用户Eugeniusz Fizdejko完整的2012年重写表单：
       
     
     
     
    添加标记时适用于我： 
     
     
      var marker = new google.maps.Marker（{
     position：myLatlng，
     title：Hello World！
    }）; 
     
     google.maps.event.addListener（map，idle，function（）{
     marker.setMap（map）; 
    }）; 
          
     
    There are a number of problems, which seem to be fairly well-known, when using the Google Maps API to render a map within a jQuery UI tab. I've seen SO questions posted about similar issues (here and here, for example) but the solutions there only seem to work for v2 of the Maps API. Other references I checked out are here and here, along with pretty much everything I could dig up through Googling.
    


    I've been trying to stuff a map (using v3 of the API) into a jQuery tab with mixed results. I'm using the latest versions of everything (currently jQuery 1.3.2, jQuery UI 1.7.2, don't know about Maps).
    


    This is the markup & javascript:
    <body>
    <div id="dashtabs">
        <span class="logout">
            <a href="go away">Log out</a>
        </span>
        <!-- tabs -->
        <ul class="dashtabNavigation">
            <li><a href="#first_tab" >First</a></li>
            <li><a href="#second_tab" >Second</a></li>
            <li><a href="#map_tab" >Map</a></li>
        </ul>

        <!--  tab containers -->
        <div id="first_tab">This is my first tab</div>
        <div id="second_tab">This is my second tab</div>
        <div id="map_tab">
             <div id="map_canvas"></div>
        </div>
    </div>
</body>

    and
    $(document).ready(function() {
    var map = null;
    $('#dashtabs').tabs();
    $('#dashtabs').bind('tabsshow', function(event, ui) {
        if (ui.panel.id == 'map_tab' && !map)
        {
            map = initializeMap();
            google.maps.event.trigger(map, 'resize');
        }
    });
});

function initializeMap() {
    // Just some canned map for now
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map($('#map_canvas')[0], myOptions);
}

    And here's what I've found that does/doesn't work (for Maps API v3):
    


      

    • Using the off-left technique as described in the jQuery UI Tabs documentation (and in the answers to the two questions I linked) doesn't work at all. In fact, the best-functioning code uses the CSS .ui-tabs .ui-tabs-hide { display: none; } instead.
      • 

    • The only way to get a map to display in a tab at all is to set the CSS width and height of #map_canvas to be absolute values. Changing the width and height to auto or 100% causes the map to not display at all, even if it's already been successfully rendered (using absolute width and height).
      • 

    • I couldn't find it documented anywhere outside of the Maps API, but map.checkResize() won't work anymore. Instead, you have to fire a resize event by calling google.maps.event.trigger(map, 'resize').
      • 

    • If the map is not initialized inside of a function bound to a tabsshow event, the map itself is rendered correctly but the controls are not - most are just plain missing.
      • 

    


    So, here are my questions:
    


      

    • Does anyone else have experience accomplishing this same feat? If so, how did you figure out what would actually work, since the documented tricks don't work for Maps API v3?
      • 

    • What about loading tab content using Ajax as per the jQuery UI docs? I haven't had a chance to play around with it but my guess is that it's going to break Maps even more. What are the chances of getting it to work (or is it not worth trying)?
      • 

    • How do I make the map fill the largest possible area? I'd like it to fill the tab and adapt to page resizes, much in the way that it's done over at maps.google.com. But, as I said, I appear to be stuck with applying only absolute width and height CSS to the map div.
      • 

    


    Sorry if this was long-winded but this might be the only documentation for Maps API v3 + jQuery tabs. Cheers!
     解决方案 
    Note: this answer received an invalid 3rd party edit which essentially replaced its content, something that a 3rd party editor should not do.  However, the result may be more useful than the original, so both versions are now given below:
    


    


      

    • Original author Anon's version from 2010, after one edit by Anon
      


      google.maps.event.trigger(map, 'resize');
 map.setZoom( map.getZoom() );
      • 

    


    is suggested by
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 as a
v3 substitute for v2's checkResize().
    


    Blech - bad google, no cookie.
    


    


      

    • User Eugeniusz Fizdejko's complete rewrite form 2012:
      • 

    


    For me works when adding a marker:
    var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

google.maps.event.addListener(map, "idle", function(){
    marker.setMap(map);
});

    

                        
    这篇关于Google Maps API v3 + jQuery UI标签出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆