Google Maps 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;
        }
    });
});