0

我有一个简单的程序，我希望在其中发生以下情况：

  1. 单击“Add Some Markers to Map”，将显示 4 个标记，其中包含cityList数组中指定的位置。
  2. 单击一个标记，它将打开 infoWindow 并显示cityList数组中的相应索引。因此，如果您单击与 对应的标记cityList[0]，它将在 infoWindow 中显示“0”。

我可以添加标记并添加 infoWindows，但 infoWindows 中的内容不正确。首先，它们都是相同的，其次它们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>
4

1 回答 1

4

我明白你的意思了。您在使用 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>
于 2012-08-23T22:19:54.463 回答