Добавьте infoWindow к маркеру карты, используя jQuery для мобильных устройств, API карт Google версии 3.

У меня есть простой скрипт, который добавляет маркер на карту, когда вы нажимаете кнопку, используя мобильный jQuery и API Google Maps v3. Я хочу добавить к этому маркеру базовое информационное окно, чтобы при нажатии на него отображалось «Hello World».

Кажется, это должно быть очень просто, но я не могу правильно понять синтаксис. Я добавляю такие маркеры

$('#map_canvas').gmap('addMarker', { 'position': chicago } );

и я не могу найти хороших примеров, когда вы также настраиваете информационное окно, когда вы также настраиваете маркер.

Вот мой код. Если сохранять в каталог jquery-ui-map-3.0-rc\demos\, то все пути будут правильными. Когда вы нажимаете «Добавить еще несколько маркеров», на карту добавляется маркер в chicago месте. Я хочу иметь возможность щелкнуть по этому маркеру и открыть информационное окно с надписью «Hello World!».

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

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


            $(document).ready(function() 
            {
                initialize();
                $('.add-markers').click(function() {
                    $('#map_canvas').gmap('addMarker', { 'position': chicago } );
                });
            });
        </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>

Если я изменю код внутри $(document).ready(function()){} на следующий, маркер больше не будет отображаться.

        $(document).ready(function()
        {
            initialize();
            $('.add-markers').click(function() {
                //$('#map_canvas').gmap('addMarker', { 'position': chicago, 'content': "Hello World!"} );
                $('#map_canvas').gmap({'callback': function() {
                    var self = this;
                    self.addMarker({'position': chicago }).click(function() {
                        self.openInfoWindow({ 'content': 'Hello World!' }, this);
                    });
                    }});
                });
            });

google-maps-api-3 jquery-mobile infowindow jquery-ui-map
person erin    schedule 23.08.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я добавил запрошенное открытое информационное окно. Пожалуйста, проверьте приведенный ниже код:

<!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 };

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

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

            $(document).on('click', '.add-markers', function(e) {
                e.preventDefault();
                $('#map_canvas').gmap('addMarker', { 'position': chicago } ).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, 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>      
    </body>
</html>

Пример без подключаемого модуля jQuery-ui-maps:

<!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">

            var cityList = [
                ['Chicago', 41.850033, -87.6500523, 1],
                ['Illinois', 40.797177,-89.406738, 2]
            ],
            demoCenter = new google.maps.LatLng(41,-87),
            map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }

            function addMarkers()
            {
                var marker, 
                i,
                infowindow = new google.maps.InfoWindow();

                for (i = 0; i < cityList.length; i++) 
                {  
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                        map: map,
                        title: cityList[i][0]
                    });

                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(cityList[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                }
            }
            $(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
comment
Спасибо, эти небольшие примеры работают, но есть ли способ сделать это без использования синтаксиса $('#map_canvas').gmap...? Как я могу сделать то же самое с глобальными переменными для карты и маркера? Я пробовал кое-что самостоятельно, но они, похоже, не работают. - person erin; 23.08.2012
comment
Привет, Эрин, я обновлю свой пост новым примером, в котором плагин jquery-ui-map был удален. Поэтому используется только Google Maps API v3. Спасибо - person Apostolos Emmanouilidis; 24.08.2012
comment
Спасибо, у меня есть еще один вопрос по этому вопросу, связанный с этим комментарием, который также касается вопроса о глобальной переменной, stackoverflow.com/questions/12099351/ - person erin; 24.08.2012