jquery - Google Maps API 3 存在问题

Question

我正在尝试将 google map 放入 jqueryui 选项卡中。 map 出现；然而，完整的 map 本身并没有填满其 Canvas 。此外，尝试滚动 map 会使 map 变得跳跃。有人有什么想法吗？这是我正在使用的代码:

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

这是一个已知问题。解决方案是在显示选项卡时动态加载 map 。这是一个非常简单的通用解决方案。当您加载特定选项卡时，检查 map 是否存在并在需要时加载。

$(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 ，激活选项卡时可以使用回调函数。

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

});