Возникла проблема с JavaScript, и я хотел бы знать, не могли бы вы помочь мне, пожалуйста.У меня проблема с переменными, которые не выбираются, думая, что это, возможно, проблема в области видимости, но не могу понять.
Я пытаюсь настроить приложение на основе карт Google, используя jquery mobile иЯ использовал http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt4part1 учебные пособия, но настраивался в соответствии с моими потребностями.
Общий план состоит в том, чтобы иметь список ссылок, которые при нажатии на них открывают различные места на карте и поиск следовот вашего текущего местоположения до нового пункта назначения.
Итак, у меня есть функция, настроенная для получения информации из идентификатора данных hrefs.
<a href="#page-map" class="destinationlink" data-role=button data-identity="53.37677497506021, -6.274824142456055" data-icon="star">Location link</a>
Информация, которую он извлекает, является лат/ длинные координаты.Затем я делю информацию, которая была извлечена, и помещаю информацию в две переменные (широта и долгота).Эта часть работает нормально - я предупредил всю информацию, поступающую для latValue и longValue, и обе отображаются нормально при нажатии любой кнопки.
$('.destinationlink').live('click',
function() {
mapID = $(this).data("identity");
// var mapID = '53.33970117191209, -6.24922513961792';
//using this to split the lat/long info into 2 variables
var LocArray = mapID.split(',');
latValue = LocArray[0];
longValue = LocArray[1];
//can alert out these 2 values fine from here
}
);
Проблема в строке ниже:
var mapdata = { destination: new google.maps.LatLng(latValue, longValue) };
Значения широты и долготы, похоже, не достигаются.Я предполагаю, что это какая-то проблема с изменяемой областью видимости, но я не совсем уверен, поэтому любая помощь будет принята с благодарностью!
Если я добавлю жестко закодированные детали в эту строку, например:
var mapdata = { destination: new google.maps.LatLng(53.37677497506021, -6.274824142456055) };
Загрузка карты работает нормально.
Если я поставлю
var latValue = 53.33970117191209;
var longValue = -6.24922513961792;
непосредственно перед строкой, она также будет работать нормально.Так что я знаю, что остальные настройки верны, это просто переменная, которая не проходит, насколько я вижу.
Но она не переносит переменные из функции click.Я пытался представить все это как одну функцию, но у меня это тоже не сработало.
Есть идеи ??
Я приведу полный код ниже, если я оставлю что-то важноеиз.Я попытался настроить jsfiddle, но у меня ничего не вышло, извините!
Заранее спасибо за любую помощь, очень признателен!Я все еще новичок в javascript, так что я думаю, если вы помните об этом с любой помощью, пожалуйста!:)
var mapID;
var latValue;
var longValue;
$('.destinationlink').live('click',
function() {
mapID = $(this).data("identity");
// var mapID = '53.33970117191209, -6.24922513961792';
//using this to split the lat/long info into 2 variables
var LocArray = mapID.split(',');
latValue = LocArray[0];
longValue = LocArray[1];
//can alert out these 2 values fine from here
}
);
// var latValue = 53.33970117191209;
// var longValue = -6.24922513961792;
var mapdata = { destination: new google.maps.LatLng(latValue, longValue) };
//var mapdata = { destination: new google.maps.LatLng(53.37677497506021, -6.274824142456055) };
// Start page
$('#page-home').live("pagecreate", function() {
$('#map_square').gmap(
{ 'center' : mapdata.destination,
'zoom' : 12,
'mapTypeControl' : false,
'navigationControl' : false,
'streetViewControl' : false,
'callback' : function(map) {
$('#map_square').gmap('addMarker',
{ 'position' : map.getCenter(),
'animation' : google.maps.Animation.DROP
});
}
});
$('#map_square').click( function() {
$.mobile.changePage('#page-map', 'slide');
});
});
//Create the fullscreen map, request display of directions
var toggleval = true; // used for test case: static locations
$('.refresh').live("click", function() {
$('#map_canvas').gmap({
'callback' : function(map) {
// START: Tracking location with device geolocation
if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition (
function(position) {
$.mobile.showPageLoadingMsg();
$('#map_canvas').gmap('displayDirections',
{ 'origin' : new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
'destination' : mapdata.destination, 'travelMode' :
google.maps.DirectionsTravelMode.DRIVING},
{ 'panel' : document.getElementById('dir_panel')},
function (success, result) {
if (success) {
$.mobile.hidePageLoadingMsg();
var center = result.routes[0].bounds.getCenter();
$('#map_canvas').gmap('option', 'center', center);
$($('#map_canvas').gmap('getMap')).triggerEvent('resize');
} else {
alert('Unable to get route');
}
}
);
},
function(){
alert('Unable to get location');
$.mobile.changePage('#page-home', 'slide');
});
}
// END: Tracking location with device geolocation
// START: Tracking location with test lat/long coordinates
// Toggle between two origins to test refresh, force new route to be calculated
/* var position = {};
if (toggleval) {
toggleval = false;
position = { coords: { latitude: 57.6969943, longitude: 11.9865 } };//Gothenburg
} else {
toggleval = true;
position = { coords: { latitude: 58.5365967, longitude: 15.0373319 } };//Motala
}
$('#map_canvas').gmap('displayDirections',
{ 'origin' : new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
'destination' : mapdata.destination,
'travelMode' : google.maps.DirectionsTravelMode.DRIVING},
{ 'panel' : document.getElementById('dir_panel')},
function (success, result) {
if (success) {
var center = result.routes[0].bounds.getCenter();
$('#map_canvas').gmap('option', 'center', center);
$($('#map_canvas').gmap('getMap')).triggerEvent('resize');
} else {
alert('Unable to get route');
}
});*/
// END: Tracking location with test lat/long coordinates
}
});
return false;
});
// Map page
$('#page-map').live("pagecreate", function() {
$('.refresh').trigger('click');
});
// Go to map page to see instruction detail (zoom) on map page
$('#dir_panel').live("click", function() {
$.mobile.changePage('#page-map', 'slide');
});
// Briefly show hint on using instruction tap/zoom
/*
$('#page-dir').live("pageshow", function() {
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"
+ "Tap any instruction" + "<br>" + "to see details on map" +"</h1></div>")
.css({ "display": "block", "opacity": 0.9, "top": $(window).scrollTop() + 100 })
.appendTo( $.mobile.pageContainer )
.delay( 1400 )
.fadeOut( 700, function(){
$(this).remove();
});
});*/
И HTML ..
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=screen.width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery Google Maps Plugin</title>
<link rel="stylesheet" href="jquery.mobile-1.0b1.css" />
<link rel="stylesheet" href="mapapp.css" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.ui.map.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.js"></script>
<script type="text/javascript" charset="utf-8" src="mapapp.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="page-home">
<div data-role="header" data-theme="d" data-nobackbtn="true">
<h1>Find a pitch</h1>
</div>
<div data-role="content" id="contenthome">
<div class="ui-grid-a">
<!--
This line brings in the mini map - might be useful later on for a team page
<div class="ui-block-a"><div id="map_square"></div></div>
-->
<div class="ui-block-b"><p><strong>Tap on the map to see route and driving directions to this location.</strong></p></div>
</div><!-- /grid-a -->
<div data-role="controlgroup" data-theme="a" data-type="horizontal">
<a href="#page-map" class="destinationlink" data-role=button data-identity="53.37677497506021, -6.274824142456055" data-icon="star">Location link</a>
<a href="#page-map" class="destinationlink" data-role=button data-identity="53.39251677780504, -6.285123825073242" data-icon="star">Location 2</a>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h5>Footloose</h5>
</div><!-- /footer -->
</div><!-- /page-home -->
<div data-role="page" data-theme="c" data-fullscreen="true" id="page-map">
<div data-role="content" class="map-content">
<div id="map_canvas"></div>
</div><!-- /content -->
<div data-role="footer" data-theme="d" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-home">Home</a></li>
<li><a href="#page-map" class="refresh">Refresh</a></li>
<li><a href="#page-dir">Directions</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page-map -->
<div data-role="page" data-theme="c" data-fullscreen="true" id="page-dir">
<div data-role="content">
<div id="dir_panel"></div>
</div><!-- /content -->
<div data-role="footer" data-theme="d" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-home">Home</a></li>
<li><a href="#page-map">Map</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page-dir -->
</body>
</html>
РЕДАКТИРОВАТЬ
Хорошо, поэтому я воспользовался советом снизу и поместил vard и $ mapdata'#map_square'). gmap (.. внутри функции click, но она не работает для меня. Местоположение все еще не загружается. Сначала я поместил туда только переменную mapdata, но это, казалось, сломало ее, и страница не сталане загружается вообще. Кто-нибудь получил какие-либо предложения, пожалуйста?
Спасибо за ваше время!
Это то, что у меня сейчас (если синтаксис неверен или что-то)
$('.destinationlink').live('click',
function() {
mapID = $(this).data("identity");
// var mapID = '53.33970117191209, -6.24922513961792';
//using this to split the lat/long info into 2 variables
var LocArray = mapID.split(',');
latValue = LocArray[0];
longValue = LocArray[1];
//can alert out these 2 values fine from here
var mapdata = { destination: new google.maps.LatLng(latValue, longValue) };
// Start page
$('#page-home').live("pagecreate", function() {
$('#map_square').gmap(
{ 'center' : mapdata.destination,
'zoom' : 12,
'mapTypeControl' : false,
'navigationControl' : false,
'streetViewControl' : false,
'callback' : function(map) {
$('#map_square').gmap('addMarker',
{ 'position' : map.getCenter(),
'animation' : google.maps.Animation.DROP
});
}
});
$('#map_square').click( function() {
$.mobile.changePage('#page-map', 'slide');
});
});
}
);
// var latValue = 53.33970117191209;
// var longValue = -6.24922513961792;
//var mapdata = { destination: new google.maps.LatLng(53.37677497506021, -6.274824142456055) };
//Create the fullscreen map, request display of directions
var toggleval = true; // used for test case: static locations
$('.refresh').live("click", function() {
$('#map_canvas').gmap({
'callback' : function(map) {
// START: Tracking location with device geolocation
if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition (
function(position) {
$.mobile.showPageLoadingMsg();
$('#map_canvas').gmap('displayDirections',
{ 'origin' : new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
'destination' : mapdata.destination, 'travelMode' :
google.maps.DirectionsTravelMode.DRIVING},
{ 'panel' : document.getElementById('dir_panel')},
function (success, result) {
if (success) {
$.mobile.hidePageLoadingMsg();
var center = result.routes[0].bounds.getCenter();
$('#map_canvas').gmap('option', 'center', center);
$($('#map_canvas').gmap('getMap')).triggerEvent('resize');
} else {
alert('Unable to get route');
}
}
);
},
function(){
alert('Unable to get location');
$.mobile.changePage('#page-home', 'slide');
});
}
// END: Tracking location with device geolocation
// START: Tracking location with test lat/long coordinates
// Toggle between two origins to test refresh, force new route to be calculated
/* var position = {};
if (toggleval) {
toggleval = false;
position = { coords: { latitude: 57.6969943, longitude: 11.9865 } };//Gothenburg
} else {
toggleval = true;
position = { coords: { latitude: 58.5365967, longitude: 15.0373319 } };//Motala
}
$('#map_canvas').gmap('displayDirections',
{ 'origin' : new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
'destination' : mapdata.destination,
'travelMode' : google.maps.DirectionsTravelMode.DRIVING},
{ 'panel' : document.getElementById('dir_panel')},
function (success, result) {
if (success) {
var center = result.routes[0].bounds.getCenter();
$('#map_canvas').gmap('option', 'center', center);
$($('#map_canvas').gmap('getMap')).triggerEvent('resize');
} else {
alert('Unable to get route');
}
});*/
// END: Tracking location with test lat/long coordinates
}
});
return false;
});
// Map page
$('#page-map').live("pagecreate", function() {
$('.refresh').trigger('click');
});
// Go to map page to see instruction detail (zoom) on map page
$('#dir_panel').live("click", function() {
$.mobile.changePage('#page-map', 'slide');
});
// Briefly show hint on using instruction tap/zoom
/*
$('#page-dir').live("pageshow", function() {
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"
+ "Tap any instruction" + "<br>" + "to see details on map" +"</h1></div>")
.css({ "display": "block", "opacity": 0.9, "top": $(window).scrollTop() + 100 })
.appendTo( $.mobile.pageContainer )
.delay( 1400 )
.fadeOut( 700, function(){
$(this).remove();
});
});*/