0
有一個JavaScript的問題，並想知道如果你能幫我所有請。我遇到的問題是變量沒有被拾取，認爲它可能是一個範圍問題，但無法弄清楚。jQuery的可變問題在jQuery的移動和谷歌地圖應用程序
我試圖使用jQuery Mobile的建立谷歌地圖應用基礎，並已使用http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt4part1教程被調整，但適合我的需要。
的總體規劃是有當你點擊他們打開地圖，從您目前的位置的線索取景器到新的目標上的不同位置，其中的鏈接列表。
所以我成立了信息拉從HREF中的數據標識的功能。
<a href="#page-map" class="destinationlink" data-role=button data-identity="53.37677497506021, -6.274824142456055" data-icon="star">Location link</a>
其拉入的信息是緯度/長度座標。然後，我將這些信息分開，並將信息放入2個變量（lat和long）中。這部分工作正常 - 我已經通知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) };
爲LAT /值長不來通過。我猜測它的某種變量範圍問題，但我不確定如此任何幫助將不勝感激！
如果我把硬編碼的細節在此行中，如：
var mapdata = { destination: new google.maps.LatLng(53.37677497506021, -6.274824142456055) };
地圖負載正常工作。
如果我把
var latValue = 53.33970117191209;
var longValue = -6.24922513961792;
直接前行，它也能正常工作。所以我知道其餘的設置是正確的，它只是我看不到的變量。
但它不會通過從點擊函數變量進行。試圖把整個事情作爲一個功能，但這對我也不起作用。
任何想法??
我把下面的完整代碼櫃面我要走了什麼重要的東西出來。我嘗試設置一個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>
編輯
好了，所以我從下面拍攝的建議，並把VAR屬於MapData和$（ '＃map_square'）。 gmap（..在點擊函數中，但它沒有爲我工作，該位置仍然無法加載，我剛剛把mapdata var放在那裏，但似乎打破了它，而頁面根本沒有加載。任何人有任何建議嗎？
謝謝你的時間！
這是我現在（櫃面語法錯誤的東西）
$('.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();
});
});*/
嘿感謝您的幫助，我想這對，但沒有運氣 - 我有 - 'code' $（ '＃分頁家'）生活（ 「pagecreate」，函數（）{\t \t \t \t \t \t 。\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $（ '＃map_square'）GMAP（ { '中心'：{德斯坦ation：new google.maps.LatLng（latValue，longValue）}， 'zoom'：12， 'mapTypeControl'：false， 是你的意思嗎？ –