谷歌地圖API 3代理越野車

Question

我試圖把一個谷歌地圖內的jqueryui選項卡。地圖顯示出來;然而，完整的地圖本身並沒有填滿它的畫布。另外，試圖滾動地圖會讓它變得很詭異。有沒有人有任何想法？以下是我正在使用的代碼：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="TabsExample.aspx.cs" Inherits="TabsExample" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server"> 
    <link href="css/jquery-ui-1.9.2.custom.css" rel="stylesheet" /> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/jquery-ui-1.9.2.custom.js"></script> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3RgCHRyhBj2Ou01h_MwJrG2uITC4pv1E&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     }); 
    </script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="TopNavigationContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content5" ContentPlaceHolderID="RightColumnContent" Runat="Server"> 
</asp:Content> 
<asp:Content ID="Content6" ContentPlaceHolderID="MainContent" Runat="Server"> 
    <div id="tabs" style="min-height: 500px;"> 
    <ul> 
     <li><a href="#tab-1"><span>One</span></a></li> 
     <li><a href="#tab-2"><span>Two</span></a></li> 
     <li><a href="#APSU-tab"><span>Three</span></a></li> 
    </ul> 
    <div id="tab-1"> 
     Tab 1's Content 
    </div> 
    <div id="tab-2"> 
     Tab 2's Content 
    </div> 
    <div id="APSU-tab"> 
     <div id="map_canvas" style="width:300px; height:300px;"></div> 
    </div> 
    </div> 
    <script type="text/javascript"> 
    $("#tabs").tabs(); 
    </script> 
</asp:Content> 
<asp:Content ID="Content7" ContentPlaceHolderID="FooterContent" Runat="Server"> 
</asp:Content> 

Answer 1

這是一個已知問題。解決方案是在顯示選項卡時動態加載地圖。這是一個非常簡單的通用解決方案。當你加載特定的選項卡時，檢查地圖的存在並在需要時加載。

$(document).ready(function() { 

    function my_tab_reveal() { // or whatever function you use for showing your tabs content 
     // whatever your code for revealing tab content is here 

     if (!loaded) { // this checks to see if the map is not already loaded 
      load(); // this loads the map 
     } 
    } 

    var loaded = false; 
    load = function() { 
     // your google maps JavaScript code goes here 

     // checks tiles to see if map has loaded 
     google.maps.event.addListener(map, "tilesloaded", function() { 
      loaded = true; 
     }); 
    } 

}); 

---

編輯：

按jQuery UI documentation，還有當標籤被激活時，你可以使用一個回調函數。

「選項卡激活後（動畫完成後）觸發。」

$(document).ready(function() { 

    $("#tabs").on("tabsactivate", function(event, ui) { 
     $("#map_canvas").each(function() { 
      if (!loaded) { // this checks to see if the map is not already loaded 
       load(); // this loads the map 
      } 
     }); 
    }); 

    var loaded = false; 
    load = function() { 
     // your google maps JavaScript code goes here 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     // checks tiles to see if map has loaded 
     google.maps.event.addListener(map, "tilesloaded", function() { 
      loaded = true; 
     }); 
    } 

}); 

Answer 2

另一個解決辦法是告訴地圖來調整和你第一次揭示了標籤內容後重新定位。

創建地圖行後直接添加這些行：

var hasRevealedMap = false; 

$('.ui-tabs').bind('tabsshow', function(event, ui) { 
    $("#" + ui.panel.id + " #map_canvas").each(function() { 
     if (!hasRevealedMap) { 
      google.maps.event.trigger(map, "resize"); 
      map.setCenter(center); 
      map.setZoom(8); 
      hasRevealedMap = true; 
     } 
    }); 
});