1

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>
4

2 に答える 2

2

これは既知の問題です。解決策は、タブを表示したときにマップを動的にロードすることです。これは非常に簡単な一般的なソリューションです。特定のタブをロードするときは、マップの存在を確認し、必要に応じてロードします。

$(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のドキュメントによると、タブがアクティブ化されたときに使用できるコールバック関数があります。

「タブがアクティブ化された後（アニメーションが完了した後）にトリガーされます。」

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

});
于 2012-12-08T21:01:14.647 に答える
1

もう1つの解決策は、タブの内容を最初に表示した後で、マップにサイズ変更と再配置を指示することです。

マップを作成する行の直後に次の行を追加します。

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;
        }
    });
});
于 2012-12-08T21:45:51.423 に答える