[英]Jquery variable problem in jquery mobile & google maps app
有一个JavaScript问题,想知道是否能对我有所帮助。 我遇到的问题是变量没有被拾取,认为它可能是范围问题,但无法弄清楚。
我正在尝试使用jquery mobile设置基于Google Maps的应用程序,并且一直在使用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>
其引入的信息是经/纬度坐标。 然后,我将已提取的信息拆分,并将其放入2个变量(经纬度和经度)中。 该部分工作正常-我已提醒所有有关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>
编辑
好的,所以我接受了下面的建议,并将mapdata var和$('#map_square')。gmap(..)放在click函数中,但对我来说不起作用。该位置仍然无法加载。我把刚开始时只有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();
});
});*/
您需要将var mapdata
放入click
函数中。 脚本不等待单击来设置该mapdata变量,因此latValue
和longValue
为null。
在评估mapData
,未分配lat
和long
(在click
分配)。 请改用此方法(假设在pagecreate
发生时,点击已被触发:
$('#map_square').gmap(
{ 'center' : { destination: new google.maps.LatLng(latValue, longValue) },
...
不应该是这样吗? 每当有人单击链接时,它将进入页面地图,只要该页面地图创建了该链接,便会从元素数据访问latlng。 下一个链接不会创建地图,但会使用新的latlng值更新地图。
var mapdata = { destination: new google.maps.LatLng('INITIAL_LAT', 'INITIAL_LNG') };
$('.destinationlink').live('click', function() {
// get the el data
mapdata.destination = new google.maps.LatLng(LocArray[0], LocArray[1]);
});
$('#page-map').live("pagecreate", function() {
// setup the gmap with mapdata.destination as center
});
$('#page-map').live("pageshow", function() {
// update the gmap center
$('#map_square').gmap('option', 'center', mapdata.destination);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.