jquery - InfoWindowsはユニークではありません、グーグルマップAPI v3、jquery mobile

Question

私は次のことをしたい簡単なプログラムを持っています：

[マップにいくつかのマーカーを追加]をクリックすると、cityList配列で指定された場所に4つのマーカーが表示されます。
マーカーをクリックすると、infoWindowが開き、対応するインデックスがcityList配列に表示されます。したがって、に対応するマーカーをクリックするとcityList[0]、情報ウィンドウに「0」が表示されます。

マーカーを追加してinfoWindowsを追加できますが、infoWindowsの内容が正しくありません。まず第一に、それらはすべて同じであり、第二に、はルーiプの終わりにイテレータの値を表示しています。

私の質問は

どうすればこれを修正できますか？
マップのグローバル変数を使用してこれと同じコードを実装しようとしましたが、機能しません。なぜだめですか？たとえば、私が交換した場合

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>

score 4 · Accepted Answer

あなたの言ってる事がわかります。jquery-ui-maps プラグインを使用して、一意の infoWindows を持つマーカーのリストを作成する際の問題については、あなたは正しかったです。

これらの問題を克服するために、各 $marker 定義で一意の ID (id: i) を作成しています。この ID は、i という名前の for ループインデックスと同じです。クリックイベントでは、マーカーの ID から正しいインデックスを知っており、それを使用して正しい 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>

jquery - InfoWindowsはユニークではありません、グーグルマップAPI v3、jquery mobile

1 に答える 1

Related

Reference