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，您可以在激活标签页时使用回调功能。

＆＃34;激活标签后触发（动画完成后）。＆＃34;

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

谷歌地图API 3正在行动

2 个答案: