InfoWindows не уникальны, Google Maps API v3, jquery mobile

У меня есть простая программа, в которой я хочу, чтобы произошло следующее:

  1. Нажмите «Добавить несколько маркеров на карту», ​​отобразятся 4 маркера с местоположениями, указанными в массиве cityList.
  2. Щелкните маркер, и он откроется, а информационное окно отобразит соответствующий индекс в массиве cityList. Поэтому, если вы нажмете на маркер, соответствующий cityList[0], он покажет вам «0» в информационном окне.

Я могу добавить маркеры и добавить информационные окна, но содержимое информационных окон неверно. Во-первых, они все одинаковые, а во-вторых, отображают значение итератора i в конце цикла.

Мои вопросы

  1. Как я могу это исправить?
  2. Я пытался реализовать этот же код, используя глобальную переменную для карты, и он не работает. Почему бы нет? Например, если я заменю
function initialize()
{
    $('#map_canvas').gmap({ 'center': city0, 'zoom': 7, 'disableDefaultUI':false });
}

с участием

var map;
function initialize()
{
    map = new google.maps.Map(document.getElementById("map_canvas"), {'center': city0, 'zoom': 7, 'disableDefaultUI':false } );
}

тогда карта даже не появляется, когда я загружаю страницу.

Вот мой код:

<!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.0.1/jquery.mobile-1.0.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.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 city0 = new google.maps.LatLng(41.850033,-87.6500523);
    var city1 = new google.maps.LatLng(41,-87);
    var city2 = new google.maps.LatLng(41.5,-87.5);
    var city3 =  new google.maps.LatLng(41.4,-87.2);
    var cityList = [city0, city1, city2, city3];

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

    $(document).ready(function()
    {
        initialize();
        $('.add-markers').click(function() {
            for(var i=0; i<cityList.length; i++){
                $('#map_canvas').gmap('addMarker', { 'position': cityList[i] } ).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', {'content': i.toString()}, this);
                });
            }
        });
    });
    </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="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
        </div>
    </div>
    <div id="info-page" data-role="page">
        <div data-role="header">
            <h1><a data-ajax="false" href="/">more info 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="info_page" style="height:350px;"></div>
            </div>
            <div id="moreInfo"></div>
    </div>
</body>
</html>

jquery google-maps-api-3 jquery-mobile infowindow jquery-ui-map
person erin    schedule 23.08.2012    source источник
comment
Пример, который я опубликовал, имеет 2 маркера, а информационные окна разделены. Маркер Чикаго показывает Чикаго, а маркер Иллинойса показывает Иллинойс. Теперь, если вы замените строку infowindow.setContent(cityList[i][0]); со строкой infowindow.setContent(i+''); информационное окно покажет индекс массива. Что касается вашего вопроса 2, есть много способов реализовать карты. В моем последнем примере я использовал только плагин Google Maps v3. В примерах, содержащих ключевое слово gmap, подключаемый модуль jquery-ui-map используется в сочетании с Google Map v3. Если я что-то упустил, объясните, пожалуйста.   -  person Apostolos Emmanouilidis    schedule 24.08.2012
comment
Эрин, проблема, о которой вы говорите, связана с примером с gmap? если да, я мог бы опубликовать новый пример с решением. Спасибо   -  person Apostolos Emmanouilidis    schedule 24.08.2012
comment
Да, я нашел много примеров, подобных показанному вами, с использованием InfoWindows без использования gmaps. Но синтаксис с использованием jQuery-ui-map меня смущает. Было бы очень полезно, если бы вы разместили здесь пример с несколькими маркерами с уникальными информационными окнами, используя gmap. Спасибо.   -  person erin    schedule 24.08.2012
comment
Ну конечно; естественно. Выложу пример с gmap. Спасибо   -  person Apostolos Emmanouilidis    schedule 24.08.2012

Ответы (1)


arrow_upward
4
arrow_downward

Я вижу вашу точку зрения. Вы были правы насчет проблем при создании списка маркеров с уникальными информационными окнами с помощью плагина jquery-ui-maps.

Чтобы преодолеть эти проблемы, я создаю уникальный идентификатор (id: i) в каждом определении $marker, и этот идентификатор равен индексу цикла for с именем i. В событии щелчка я знаю правильный индекс из идентификатора маркера и использую его для получения правильного значения cityList.

<!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 chicago = new google.maps.LatLng(41.850033,-87.6500523),
                mobileDemo = { 'center': '41,-87', 'zoom': 7 },
                cityList = [
                    ['Chicago', 41.850033, -87.6500523, 1],
                    ['Illinois', 40.797177,-89.406738, 2]
                ];

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

            function addMarkers()
            {
                for (var i = 0; i < cityList.length; i++) 
                {
                    var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});
                    $marker.click(function() {
                        $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
                    });
                }
            }

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

            $(document).on('click', '.add-markers', function(e) {
                e.preventDefault();
                addMarkers();
            });

        </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="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
            </div>
        </div>      
    </body>
</html>
person Apostolos Emmanouilidis    schedule 23.08.2012