JQuery Mobile: не удается обновить карту Google - PullRequest
Новая
       20

JQuery Mobile: не удается обновить карту Google

4 голосов
/ 17 января 2012

У нас есть приложение, основанное на определении местоположения (Phone Gap с использованием JQuery Mobile), которое должно загружать карту Google маркером, показывающим положение этого места.После первой загрузки карта не обновляется.Я хочу показать разные местоположения в зависимости от адреса.

Кажется, что прямая трансляция не становится свободной, даже если я использую die.

Вот код. 

function loadMap(indexClicked){
  var offerPosition = getLatAndLong(indexClicked);
  var centerSettings = { 'center': offerPosition, 'zoom': 10 };
  initMap(centerSettings,indexClicked);
  refreshMap();
}

function initMap(centerSettings,indexClicked){
  $('#load-map').live('pageshow', function() {
    $('#map-canvas').gmap({'center': centerSettings.center, 'zoom': centerSettings.zoom, 'disableDefaultUI':true, 'callback': function() {
        var self = this;
        self.addMarker({'position': this.get('map').getCenter() }).click(function() {
            self.openInfoWindow({ 'content': showAdrressInMap(indexClicked) }, this);
        });
    }});
  });
}

function refreshMap(){
  $('#load-map').live('pageshow', function() {
    $('#map-canvas').gmap('refresh');
  });
}

Функция loadMap вызывается при каждом нажатии кнопки.

PS : после первой загрузки карта, похоже, кэшируется и каждый раз возвращает один и тот же адрес.При нажатии на маркер он обновляет адрес во всплывающей подсказке, но положение, по-видимому, совпадает.Я использую jquery mobile 1.0 с разрывом телефонного номера 1.3.0 вместе с jquery.ui.map.js, jquery.ui.map.services.js, jquery.ui.map.extensions.js и modernizr.min.js

1 Ответ

0 голосов
/ 02 ноября 2012

Вы можете использовать следующий подход, чтобы очистить маркеры, добавить новые маркеры и динамически установить центральное положение jQuery-ui-map. 

//clear all markers
$('#map_canvas').gmap('clear', 'markers');

// add a new marker
var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});

// on marker click show the description
$marker.click(function() {
    $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
});

// update the map's center position             
$("#map_canvas").gmap("get", "map").panTo(new google.maps.LatLng(cityList[i][1], cityList[i][2]));

Согласно документации Google Maps , метод panTo выполняет панорамирование карты на минимальное количество, необходимое для содержания заданного LatLngBounds. Это не гарантирует, где на карте будут границы, за исключением того, что будет видна как можно большая часть границ. Границы будут расположены внутри области, ограниченной типом карты и элементами управления навигации (панорамирование, масштабирование и просмотр улиц), если они присутствуют на карте. Если границы больше карты, карта будет смещена, чтобы включить северо-западный угол границ. Если изменение положения карты меньше ширины и высоты карты, переход будет плавно анимирован.

Ниже вы можете найти образец. Если вы нажмете кнопку «Чикаго», будет добавлен маркер, и центральное положение карты будет обновлено до «Чикаго» * ​​1011 *. 

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
        <script type="text/javascript">

            var mobileDemo = { 'center': '41,-87', 'zoom': 7 },
                cityList = [
                    ['Chicago', 41.850033,-87.6500523, 1],
                    ['Kentucki', 37.735377,-86.572266, 2]
                ];

            function initialize()
            {
                $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
            }

            function addMarker(i)
            {
                //clear all markers
                $('#map_canvas').gmap('clear', 'markers');

                // add a new marker
                var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});

                // on marker click show the description
                $marker.click(function() {
                    $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
                });

                // set the map's center position
                $("#map_canvas").gmap("get", "map").panTo(new google.maps.LatLng(cityList[i][1], cityList[i][2]));
            }

            $(document).on("pageinit", "#basic-map", function() {
                initialize();
            });

            $(document).on('click', '.add-marker', function(e) {
                e.preventDefault();
                addMarker(this.id);
            });
        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
                <a href="#" id="0" class="add-marker" data-role="button" data-theme="b">Chicago</a>
                <a href="#" id="1" class="add-marker" data-role="button" data-theme="b">Kentucki</a>
            </div>
        </div>      
    </body>
</html>

Надеюсь, это поможет.

...