我创建了一个带有 Master \ Child 页面配置的测试 ASP.Net 4.0 应用程序，以测试我们主应用程序所需的一些增强功能。我需要能够将谷歌地图放在 jQuery UI 选项卡控件中。它不会是生产版本中的第一个选项卡，因此我在测试应用程序中创建了一个带有两个选项卡的选项卡控件，并将地图放在第二个选项卡中。无论我做什么，我都无法在第二个选项卡中正确显示地图。作为测试，我将地图（只是 jQuery 攻击的 div id="map-canvas"）移动到第一个选项卡和 walla - 一切正常 - 即使在更改选项卡并返回之后。谷歌搜索了一吨，但找不到这个的解决方案。这是在第一个选项卡中工作的地图：
这是放置在第二个选项卡中时无法使用的相同地图：
这是代码：
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MyAPIKey&sensor=false">
</script>
<link href="App_Themes/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>Map in Tab Control</h2>
<div id="mapTabs">
<ul>
<li><a href="#a">Tab-1</a></li>
<li><a href="#b">Tab-2</a></li>
</ul>
<div id="a"><h2>This is the first tab</h2>
</div>
<div id="b"><h2>This is the second tab</h2>
<div id="map-canvas" style="min-width:300px; min-height:300px;"></div>
</div>
</div>
<script src="Scripts/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize(lt, ln) {
var latlng = new google.maps.LatLng(lt, ln);
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(lt, ln),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latlng,
title: "Test Pin"
});
marker.setMap(map);
}
$(document).ready(function () {
$("#mapTabs").tabs();
var addr = '2626 East Oakland Park Blvd Oakland Park, FL 33306';
var gc = new google.maps.Geocoder();
var lat;
var lon;
gc.geocode({ 'address': addr }, function (results, status) {
lat = results[0].geometry.location.lat();
lon = results[0].geometry.location.lng();
initialize(lat, lon);
});
});
</script>
</asp:Content>