Google Maps API 3 is acting buggy

问题

I'm trying to put a google map within a jqueryui tab. The map shows up; however, the full map itself does not fill its canvas. Additionally, trying to scroll the map makes it jumpy. Does anyone have any ideas? Here is the code I'm using:

<%@ 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>

回答1:

This is a known issue. The solution is to load the map dynamically when you reveal the tab. Here is a generic solution that is very straightforward. When you load the specific tab, check for map's existence and load if needed.

$(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;
        });
    }

});

---

EDIT:

As per jQuery UI documentation, there's a callback function you can use when the tab is activated.

"Triggered after a tab has been activated (after animation completes)."

$(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;
        });
    }

});

回答2:

The other solution is to tell the map to resize and reposition after the first time you reveal the tab contents.

Add these lines directly after the line that creates your map:

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

来源：https://stackoverflow.com/questions/13781832/google-maps-api-3-is-acting-buggy