Javascript 需要帮助-映射未在JQuery UI选项卡中正确加载-不是重复
另一篇文章中的“答案”都不能解决我的问题。请阅读我的帖子,并尝试为我指引正确的方向 编辑-编辑-编辑 我已经更新了java脚本以包含推荐的函数 我在这里为那些不喜欢JSFIDLE的人提供了HTML 我已经在这里阅读了大量的问题和答案,我无法将我的谷歌地图正确加载到调用它的JQueryUI选项卡中 我知道必须先加载地图,但我无法获取要加载的选项卡,然后返回“主页”选项卡。我尝试过左偏技术,但没有效果 我需要帮助。一双新的眼睛会非常有帮助 任何帮助都将不胜感激,因为我在这个项目上远远落后 请查看下面引用的JSFIDLE,并告诉我哪里出了问题。我已经穷途末路了,真的需要一些干预。你们中的一位Java/jqueryui大师肯定可以通过快速的小高峰看出我的错误所在 问题在位置选项卡上 中间地带- 试验场地 如果转到地址/#选项卡4,则正确加载 完整的Java脚本Javascript 需要帮助-映射未在JQuery UI选项卡中正确加载-不是重复,javascript,jquery-ui,google-maps-api-3,jquery-ui-tabs,Javascript,Jquery Ui,Google Maps Api 3,Jquery Ui Tabs,另一篇文章中的“答案”都不能解决我的问题。请阅读我的帖子,并尝试为我指引正确的方向 编辑-编辑-编辑 我已经更新了java脚本以包含推荐的函数 我在这里为那些不喜欢JSFIDLE的人提供了HTML 我已经在这里阅读了大量的问题和答案,我无法将我的谷歌地图正确加载到调用它的JQueryUI选项卡中 我知道必须先加载地图,但我无法获取要加载的选项卡,然后返回“主页”选项卡。我尝试过左偏技术,但没有效果 我需要帮助。一双新的眼睛会非常有帮助 任何帮助都将不胜感激,因为我在这个项目上远远落后 请查看下面
(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"
});
});
(函数(mapDemo,$,未定义){
mapDemo.Directions=(函数(){
函数_方向(){
var映射,
方向服务,方向显示,
autoSrc、autoDest、pinA、pinB、,
markerA=new google.maps.MarkerImage('images/car.png'),
markerB=new google.maps.MarkerImage('images/gmaplogo.png'),
//缓存选择器
$selector={
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”),
paneresettn:jQuery(“#paneReset”)
},
自动完成设置=函数(){
autoSrc=newgoogle.maps.places.Autocomplete($Selectors.dirSrc[0]);
autoDest=newgoogle.maps.places.Autocomplete($Selectors.dirDst[0]);
},//自动完成设置结束
方向设置=函数(){
directionsService=new google.maps.directionsService();
directionsDisplay=新建google.maps.DirectionsRenderer({
真的吗
});
directionsDisplay.setPanel($Selectors.dirSteps[0]);
},//目录设置结束
流量设置=功能(){
//创建自定义控件并将其附加到映射
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);
//流量Btn点击事件
google.maps.event.addDomListener(controlUI,'click',函数(){
if(typeof trafficLayer.getMap()='undefined'| | trafficLayer.getMap()==null){
jQuery(controlUI).addClass('gmap-control-active');
trafficLayer.setMap(地图);
}否则{
trafficLayer.setMap(空);
jQuery(controlUI).removeClass('gmap-control-active');
}
});
map.controls[google.maps.ControlPosition.TOP\u RIGHT].push(controlDiv);
},//流量设置结束
mapSetup=函数(){
map=new google.maps.map($Selectors.mapCanvas{
缩放:16,
中心:新google.maps.LatLng(32.565243,-97.130531),
mapTypeControl:true,
mapTypeControlOptions:{
样式:google.maps.MapTypeControlStyle.DEFAULT,
位置:google.maps.ControlPosition.TOP\u右
},
泛控制:对,
全控选项:{
位置:google.maps.ControlPosition.RIGHT\u顶部
},
动物控制:对,
ZoomControl选项:{
样式:google.maps.ZoomControlStyle.LARGE,
位置:google.maps.ControlPosition.RIGHT\u顶部
},
scaleControl:对,
街景控制:对,
overviewMapControl:true,
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker1=新的google.maps.Marker({
位置:新google.maps.LatLng(32.565243,-97.130531),
地图:地图,
图标:markerB
});
自动完成设置();
方向设置();
流量设置();
},//映射设置结束
directionsRender=函数(源、目标
<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>
google.maps.event.trigger(map, 'resize');
var mapFirstClick = false;
$("#tabMap").click(function() {
mapFirstClick || setTimeout(function() {
google.maps.event.trigger(map, 'resize');
mapFirstClick = true;
map.setCenter(latLng);
}, 250);
});