Несколько карт не работают с картами jqueryMobile, phonegap и google - PullRequest
2 голосов
/ 01 апреля 2011

Я создаю мобильное приложение с 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, он показывает третью карту - локализацию одного результата.

...