Я создаю мобильное приложение с jQueryMobile alpha 3, последней телефонной пробелой и использую карты Google.Карты используются в трех местах.Сначала я могу изменить свое местоположение.Во-вторых, я могу показать результаты поиска на карте.Наконец, я могу просмотреть местоположение одного результата на карте.Когда я использую их отдельно - все работает отлично.Но когда я пытаюсь проверить свое местоположение, а затем пытаюсь отобразить результаты на карте, я получаю следующее представление:
http://images.virtualdesign.pl/images/96594gmap.png
Все еще нахождение местоположения одного результата работает просто отлично.Также с другой стороны - сначала результаты на карте, а затем проверка моего местоположения - результат точно такой же.Расположение из навигатора или моей поисковой системы правильное, в Firebug карта выглядит также правильно инициализированной.Есть идеи, что может быть не так?
<script type="text/javascript">
var searchObjects = [],
searchParameter = 0,
states = {},
localization;
var mobi = $.mobile;
function onSuccess(position){
localization = {'latitude': position.coords.latitude,
'longitude': position.coords.longitude };
mobi.pageLoading(true);
mobi.changePage('map.htm');
return false;
}
function onError(error) {
mobi.pageLoading(true);
alert('Unable to get location.');
}
$('.page-link').live("click", function() {
if (!!navigator.geolocation){
mobi.pageLoading(false);
navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 15000, enableHighAccuracy: true });
}
});
$('.page-map').live("pagecreate", function() {
if(localization){
initialize(localization.latitude, localization.longitude, 0);
}
});
$('.page-map-results').live("pagecreate", function() {
initializeResults(searchObjects);
});
function initialize(lat,lng, loc){
var latlng = new google.maps.LatLng(lat, lng),
map1, myOptions,marker;
myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
marker = new google.maps.Marker({
position: latlng,
map: map1
});
if(!loc){
map1 = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
else{
map1 = new google.maps.Map(document.getElementById("map_localization"),myOptions);
}
marker.setMap(map1);
return map1;
}
function initializeResults(data_map){
var latlng = new google.maps.LatLng(51.961869,19.134521);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("map_canvas2"),myOptions);
var icon1,
bounds = new google.maps.LatLngBounds(),
maxlng = 0,
maxlat = 0,
minlng = 0,
minlat = 0,
positions = 0;
icon1 = 'images/map_icon.png';
for(var i=0; i < data_map.length; i++){
var pos_lat = parseFloat(data_map[i]['lat']);
var pos_lon = parseFloat(data_map[i]['lon']);
if(!isNaN(pos_lat) && !isNaN(pos_lon)){
positions = 1;
addMarker(pos_lat, pos_lon, icon1);
if(pos_lat < minlat || minlat==0){
minlat = pos_lat
}
if(pos_lat > maxlat || maxlat==0){
maxlat = pos_lat
}
if(pos_lon < minlng || minlng==0){
minlng = pos_lon
}
if(pos_lon > maxlng || maxlng==0){
maxlng = pos_lon
}
lat = minlat + (( maxlat - minlat)/2);
lng = minlng + (( maxlng - minlng)/2);
var allpoints = new google.maps.LatLng(pos_lat, pos_lon);
bounds.extend(allpoints);
}
}
if(positions){
map2.fitBounds(bounds);
}
function addMarker(lat, lon, icon){
var latlng = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
position: latlng,
map: map2,
icon: icon
});
marker.setMap(map2);
}
return map2;
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
И шаблоны для обеих карт:
<div data-role="page" data-theme="a" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Gdzie jestem</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
<div data-role="page" data-theme="a" class="page-map-results" style="width:100%; height:100%;">
<div data-role="header" class="header"><h1>Wyniki</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas2" style="width:100%; height:100%;"></div>
</div>
</div>
Просто быстрое прохождение кода - page-map
- карта локализации, инициализированная page-link
.page-map-results
- второй шаблон для отображения результатов.Если initialize
получает параметр loc
, он показывает третью карту - локализацию одного результата.