需要援助 - Map无法在JQuery UI选项卡中正确加载 - 不是重复 [英] Assistance needed - Map does not load properly in JQuery UI Tabs - NOT A DUPLICATE
本文介绍了需要援助 - Map无法在JQuery UI选项卡中正确加载 - 不是重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
其他帖子的答案都不能解决我的问题。请阅读我的帖子，并尝试引导我在正确的方向
编辑 - 编辑 - 编辑
我已经更新了Java脚本以包含推荐的功能
我在这里为不喜欢jsfiddle的人添加了HTML
阅读大量的问题和答案，我无法让我的谷歌地图在JQueryUI标签中正确加载，它被调用。
据我所知，地图必须先加载但我无法获取Tab，然后返回到Home选项卡。我已经尝试过关闭技术，无济于事。
我需要帮助。一套新的眼睛将是非常有用的。
任何帮助将不胜感激，因为我远远落后于这个项目。
请查看下面引用的jsfiddle，并告诉我我错在哪里。我在我的白垩结束，真的可以用这个小小的干预。
这个问题出现在 LOCATION em> 标签
jsfiddle - http ：//jsfiddle.net/hughesjoseph/hNKPY/
测试网站 http://l2technotes.dyndns.org
正确加载地址/＃tabs-4
完整的Java脚本
（function（mapDemo，$， undefined）{
mapDemo.Directions =（function（）{
function _Directions（）{
var map，
directionsService，directionsDisplay，
autoSrc，autoDest，pinA， pinB，
markerA = new google.maps.MarkerImage（'images / car.png'），
markerB = new google.maps.MarkerImage（'images / gmaplog o.png'），
//缓存选择器
$ Selectors = {
mapCanvas：jQuery（'＃mapCanvas'）[0]，
dirPanel： jQuery（'＃directionsPanel'），
dirInputs：jQuery（'。directionInputs'），
dirSrc：jQuery（'＃dirSource'），
dirDst：jQuery（'＃dirDestination'），
getDirBtn：jQuery（'＃getDirections'），
dirSteps：jQuery（'＃directionSteps'），
paneToggle：jQuery（'＃paneToggle'），
useGPSBtn：jQuery '＃useGPS'），
paneResetBtn：jQuery（'＃paneReset'）
}，
autoCompleteSetup = function（）{
autoSrc = new google.maps。 places.Autocomplete（$ Selectors.dirSrc [0]）;
autoDest = new google.maps.places.Autocomplete（$ Selectors.dirDst [0]）;
}，// autoCompleteSetup Ends
directionsSetup = function（）{
directionsService = new google.maps.DirectionsService（）;
directionsDisplay = new google.maps.DirectionsRenderer（{
suppressMarkers：true
}）;
directionsDisplay.setPanel（$ Selectors.dirSteps [0]）;
}，// direstionsSetup Ends
trafficSetup = function（）{
//创建一个自定义控件并将其附加到地图
var controlDiv = document.createElement （'div'），
controlUI = document.createElement（'div'），
trafficLayer = new google.maps.TrafficLayer（）;
jQuery（controlDiv）.addClass（'gmap-control-container'）。addClass（'gmnoprint'）;
jQuery（controlUI）.text（'Traffic'）。addClass（'gmap-control'）;
jQuery（controlDiv）.append（controlUI）;
// Traffic Btn Click Event
google.maps.event.addDomListener（controlUI，'click'，function（）{
if（typeof trafficLayer.getMap（）== 'undefined'|| trafficLayer.getMap（）=== null）{
jQuery（controlUI）.addClass（'gmap-control-active'）;
trafficLayer.setMap（map）;
} else {
trafficLayer.setMap（null）;
jQuery（controlUI）.removeClass（'gmap-control-active'）;
}
}）;
map.controls [google.maps.ControlPosition.TOP_RIGHT] .push（controlDiv）;
} // // trafficSetup结束
mapSetup = function（）{
map = new google.maps.Map（$ Selectors.mapCanvas，{
zoom：16 ，
center：new google.maps.LatLng（32.565243，-97.130531），
mapTypeControl：true，
mapTypeControlOptions：{
style：google.maps.MapTypeControlStyle .DEFAULT，
位置：google.maps.ControlPosition.TOP_RIGHT
}，
panControl：true，
panControlOptions：{
位置：google.maps .ControlPosition.RIGHT_TOP
}，
zoomControl：true，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.LARGE，
位置：google.maps.ControlPosition.RIGHT_TOP
}，
scaleControl：true，
streetViewControl：true，
overviewMapControl：true，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var marker1 = new google.maps.Marker（{
position：new google.maps.LatLng（32.565243，-97.130531），
map：map，
icon：markerB
}）;
autoCompleteSetup（）;
directionsSetup（）;
trafficSetup（）;
}，// mapSetup结束
$ b $ directionRender =函数（源，目标）{
$ Selectors.dirSteps.find（'。msg'）。hide（）;
directionsDisplay.setMap（map）;
var request = {
origin：source，
destination：destination，
provideRouteAlternatives：false，
travelMode：google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route（request，function（response，status）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections （response）;
var _route = response.routes [0] .legs [0];
pinA = new google.maps.Marker（{
position ：_route.start_location，
map：map，
icon：markerA
}）;
}
}）;
}，// directionsRender Ends
$ b $ fetchAddress = function（p）{
var Position = new google.maps.LatLng（p.coords.latitude，p.coords.longitude ），
Locater = new google.maps.Geocoder（）;
Locater.geocode（{
'latLng'：Position
}，function（results，status）{
if（status == google.maps.GeocoderStatus。 OK）{
var _r = results [0];
$ Selectors.dirSrc.val（_r.formatted_address）;
}
}）;
，// fetchAddress Ends
invokeEvents = function（）{
//获取路线
$ Selectors.getDirBtn.on（'click'，function（e ）{
e.preventDefault（）;
var src = $ Selectors.dirSrc.val（），
dst = $ Selectors.dirDst.val（）;
directionsRender（src，dst）;
}）;
//重置Btn
$ Selectors.paneResetBtn.on（'click'，function（e）{
$ Selectors.dirSteps.html（''）;
$ Selectors.dirSrc.val（''）;
$ Selectors.dirDst.val（''）;
if（pinA）pinA.setMap（null）;
if（pinB）pinB.setMap（null）;
directionsDisplay.setMap（null）;
}）;
// Toggle Btn
$ Selectors.paneToggle.toggle（function（e）{
$ Selectors.dirPanel.animate（{$ b $'left'：' - = 305px'
}）;
jQuery（this）.html（'& gt;'）;
}，function（）{
$ Selectors.dirPanel.animate {$ b $'left'：'+ = 305px'
}）;
jQuery（this）.html（'& lt;'）;
}）;
//使用我的位置/地理位置Btn
$ Selectors.useGPSBtn.on（'click'，function（e）{
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（function（position）{
fetchAddress（position）;
}）;
}
}）;
}，// invokeEvents结束
_init = function（）{
mapSetup（）;
invokeEvents（）;
}; // _init结束
this.init = function（）{
_init（）;
返回此; //引用：mapDemo.Directions
};
返回this.init（）; //指：mapDemo.Directions.init（）
} // _Directions结束
return new _Directions（）; //创建_Directions的新对象而不是函数
}（））; // mapDemo.Directions Ends
}）（window.mapDemo = window.mapDemo || {}，jQuery）;
var mapFirstClick = false;
$（＃maptab）。click（function（）{
mapFirstClick || setTimeout（function（）{
google.maps.event.trigger（map，'resize'）;
mapFirstClick = true;
map.setCenter（32.565243，-97.130531）;
}，250）;
}）;
函数PrintElem（elem）{
Popup（$（elem）.html（））;
}
函数Popup（data）{
var mywindow = window.open（''，'my div'，'height = 600，width = 800'）;
mywindow.document.write（'< html>< head>< title> Bridgett的电解方向驱动方向< / title>'）;
mywindow.document.write（'< / head>< body>'）;
mywindow.document.write（data）;
mywindow.document.write（'< / body>< / html>'）;
mywindow.print（）;
mywindow.close（）;
返回true;
$（function（）{
$（＃tabs）。tabs（）;
}）;
$（$＃$ b $（＃accordion）。accordion（{
可折叠：true，
active：false，
heightStyle：content
}）;
}）;
相关HTML
< HTML>
< head>
< meta charset =utf-8>
< title> Bridgett的Electrolysis< / title>
<！ - 收藏夹图标 - >
< link rel =快捷图标href =images / beLogoColor3D.png/>
< link href =css / style.css =stylesheettype =text / css/>
< / head>
< body onload：#maptab;>
< div id =tabs>
< ul style =border：3px solid green>
< li class =myMenu>< a href =＃tabs-4onclick =maptab>< img height =20pxsrc =images / map.pngalt =class =img center/>位置和LT; / A>
< / li>
< / ul>
< div id =tabs-4>
< div class =myDirectionsstyle =width：19％;>
< div>
< form>
< p>
< label class =mytxt>驾驶自：< / label>
< br />
< input type =textvalue =id =dirSourcestyle =width：98％; />
< / p>
< input type =hiddenvalue =1003 E. Broad St.，76063id =dirDestination/>
< div class =mybutton>< a href =＃getDirectionsid =getDirections>获取Bridgett< br />电解的路线< / a>
< / div>
< center>
< input type =buttonvalue =Print Directionsonclick =PrintElem（'＃directionSteps'）/>
< / center>
< / form>
< / div>
< div id =directionSteps>
< center>
< p class =msg>逐步路线出现在这里< / p>
< / center>
< / div>
< / div>
< div class =myMapstyle =width：78％;>
< div id =mapCanvasstyle =width：100％; height：550px>< / div>
< / div>
< / div>
< / div>
< / body>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=placestype =text / javascript><<< ; /脚本>
< script src =js / jquery-1.9.0.jstype =text / javascript>< / script>
< script src =js / jquery-ui-1.10.0.custom.jstype =text / javascript>< / script>
< script src =js / sample.jstype =text / javascript>< / script>
< / html>
解决方案
我也有这个问题：
google.maps.event.trigger（map，'resize'）;
当tab完成淡入时触发（默认250 ms后）。这段代码适合我：
var mapFirstClick = false;
$（＃tabMap）。click（function（）{
mapFirstClick || setTimeout（function（）{
google.maps.event.trigger（map，'resize'）;
mapFirstClick = true;
map.setCenter（latLng）;
}，250）;
}）;
None of the "Answers" from the other post resolve my issue. Please Read My Post and Attempt to guide me in the right direction
EDIT - EDIT - EDIT
I have updated the java script to include the recommended function
I have included the HTML here for those who do not like jsfiddle
I have read tons of questions and answers here and I cannot get my Google Map to load properly in the JQueryUI Tab that it is called in.
I understand that the map must load first but I am not able to get the Tab to load then return to the Home tab. I have tried the Off Left Technique to no avail.
I need help. A fresh set of Eyes would be extremely Helpful.
Any help would be greatly appreciated as I am extremely far behind on this project.
Please review the jsfiddle referenced below, and tell me where I am going wrong. I am at my whits end and really could use a little intervention with this. One of you Java/jqueryui Guru's surely can see where i am going wrong with a quick little peak.
The issue is on the LOCATION Tab
The jsfiddle - http://jsfiddle.net/hughesjoseph/hNKPY/
The test site http://l2technotes.dyndns.org
Loads correctly if you go to address/#tabs-4
Complete Java Script
(function (mapDemo, $, undefined) {
mapDemo.Directions = (function () {
function _Directions() {
var map,
directionsService, directionsDisplay,
autoSrc, autoDest, pinA, pinB,
markerA = new google.maps.MarkerImage('images/car.png'),
markerB = new google.maps.MarkerImage('images/gmaplogo.png'),
// Caching the Selectors
$Selectors = {
mapCanvas: jQuery('#mapCanvas')[0],
dirPanel: jQuery('#directionsPanel'),
dirInputs: jQuery('.directionInputs'),
dirSrc: jQuery('#dirSource'),
dirDst: jQuery('#dirDestination'),
getDirBtn: jQuery('#getDirections'),
dirSteps: jQuery('#directionSteps'),
paneToggle: jQuery('#paneToggle'),
useGPSBtn: jQuery('#useGPS'),
paneResetBtn: jQuery('#paneReset')
},
autoCompleteSetup = function () {
autoSrc = new google.maps.places.Autocomplete($Selectors.dirSrc[0]);
autoDest = new google.maps.places.Autocomplete($Selectors.dirDst[0]);
}, // autoCompleteSetup Ends
directionsSetup = function () {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
directionsDisplay.setPanel($Selectors.dirSteps[0]);
}, // direstionsSetup Ends
trafficSetup = function () {
// Creating a Custom Control and appending it to the map
var controlDiv = document.createElement('div'),
controlUI = document.createElement('div'),
trafficLayer = new google.maps.TrafficLayer();
jQuery(controlDiv).addClass('gmap-control-container').addClass('gmnoprint');
jQuery(controlUI).text('Traffic').addClass('gmap-control');
jQuery(controlDiv).append(controlUI);
// Traffic Btn Click Event
google.maps.event.addDomListener(controlUI, 'click', function () {
if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) {
jQuery(controlUI).addClass('gmap-control-active');
trafficLayer.setMap(map);
} else {
trafficLayer.setMap(null);
jQuery(controlUI).removeClass('gmap-control-active');
}
});
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
}, // trafficSetup Ends
mapSetup = function () {
map = new google.maps.Map($Selectors.mapCanvas, {
zoom: 16,
center: new google.maps.LatLng(32.565243, -97.130531),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
position: google.maps.ControlPosition.TOP_RIGHT
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(32.565243, -97.130531),
map: map,
icon: markerB
});
autoCompleteSetup();
directionsSetup();
trafficSetup();
}, // mapSetup Ends
directionsRender = function (source, destination) {
$Selectors.dirSteps.find('.msg').hide();
directionsDisplay.setMap(map);
var request = {
origin: source,
destination: destination,
provideRouteAlternatives: false,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var _route = response.routes[0].legs[0];
pinA = new google.maps.Marker({
position: _route.start_location,
map: map,
icon: markerA
});
}
});
}, // directionsRender Ends
fetchAddress = function (p) {
var Position = new google.maps.LatLng(p.coords.latitude, p.coords.longitude),
Locater = new google.maps.Geocoder();
Locater.geocode({
'latLng': Position
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var _r = results[0];
$Selectors.dirSrc.val(_r.formatted_address);
}
});
}, // fetchAddress Ends
invokeEvents = function () {
// Get Directions
$Selectors.getDirBtn.on('click', function (e) {
e.preventDefault();
var src = $Selectors.dirSrc.val(),
dst = $Selectors.dirDst.val();
directionsRender(src, dst);
});
// Reset Btn
$Selectors.paneResetBtn.on('click', function (e) {
$Selectors.dirSteps.html('');
$Selectors.dirSrc.val('');
$Selectors.dirDst.val('');
if (pinA) pinA.setMap(null);
if (pinB) pinB.setMap(null);
directionsDisplay.setMap(null);
});
// Toggle Btn
$Selectors.paneToggle.toggle(function (e) {
$Selectors.dirPanel.animate({
'left': '-=305px'
});
jQuery(this).html('>');
}, function () {
$Selectors.dirPanel.animate({
'left': '+=305px'
});
jQuery(this).html('<');
});
// Use My Location / Geo Location Btn
$Selectors.useGPSBtn.on('click', function (e) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
fetchAddress(position);
});
}
});
}, //invokeEvents Ends
_init = function () {
mapSetup();
invokeEvents();
}; // _init Ends
this.init = function () {
_init();
return this; // Refers to: mapDemo.Directions
};
return this.init(); // Refers to: mapDemo.Directions.init()
} // _Directions Ends
return new _Directions(); // Creating a new object of _Directions rather than a function
} ()); // mapDemo.Directions Ends
})(window.mapDemo = window.mapDemo || {}, jQuery);
var mapFirstClick = false;
$("#maptab").click(function () {
mapFirstClick || setTimeout(function () {
google.maps.event.trigger(map, 'resize');
mapFirstClick = true;
map.setCenter(32.565243, -97.130531);
}, 250);
});
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data) {
var mywindow = window.open('', 'my div', 'height=600,width=800');
mywindow.document.write('<html><head><title>Driving Directions to Electrolysis by Bridgett</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#accordion").accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
});
Pertinent HTML
<html>
<head>
<meta charset="utf-8">
<title>Electrolysis by Bridgett</title>
<!-- Favorite Icon -->
<link rel="shortcut icon" href="images/beLogoColor3D.png" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body onload: "#maptab";>
<div id="tabs">
<ul style="border:3px solid green">
<li class="myMenu"><a href="#tabs-4" onclick="maptab"><img height="20px" src="images/map.png" alt="" class="img center" /> Location</a>
</li>
</ul>
<div id="tabs-4">
<div class="myDirections" style="width:19%;">
<div>
<form>
<p>
<label class="mytxt">Driving From :</label>
<br />
<input type="text" value="" id="dirSource" style="width:98%;" />
</p>
<input type="hidden" value="1003 E. Broad St., 76063" id="dirDestination" />
<div class="mybutton"><a href="#getDirections" id="getDirections">Get Directions to<br />Electrolysis by Bridgett</a>
</div>
<center>
<input type="button" value="Print Directions" onclick="PrintElem('#directionSteps')" />
</center>
</form>
</div>
<div id="directionSteps">
<center>
<p class="msg">Step by Step Directions Appear Here</p>
</center>
</div>
</div>
<div class="myMap" style="width:78%;">
<div id="mapCanvas" style="width:100%;height:550px"></div>
</div>
</div>
</div>
</body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places" type="text/javascript"></script>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
<script src="js/sample.js" type="text/javascript"></script>
</html>
解决方案
I've had this problem too:
google.maps.event.trigger(map, 'resize');
trigger this when tab is done fading in (default after 250 ms). This piece of code worked for me:
var mapFirstClick = false;
$("#tabMap").click(function() {
mapFirstClick || setTimeout(function() {
google.maps.event.trigger(map, 'resize');
mapFirstClick = true;
map.setCenter(latLng);
}, 250);
});
这篇关于需要援助 - Map无法在JQuery UI选项卡中正确加载 - 不是重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
