信息窗口不是唯一的，谷歌地图API V3，jQuery Mobile的

我有一个简单的程序，我想下面的情况发生：信息窗口不是唯一的，谷歌地图API V3，jQuery Mobile的

点击“添加一些标记到地图”，将显示4个标记与位置在cityList数组中指定。
单击一个标记，它将打开并显示infoWindow并在cityList数组中显示相应的索引。所以如果你点击cityList[0]对应的标记，它会在infoWindow中显示你“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>

来源

2012-08-23 erin

我发布的lat示例有2个标记，信息窗口是分开的。芝加哥标志显示芝加哥和伊利诺伊标志显示伊利诺伊。现在，如果您替换infowindow.setContent（cityList [i] [0]）行;与行infowindow.setContent（i +''）;信息窗口将显示数组索引。关于你的问题2，有很多方法来实现地图。在我的最后一个例子中，我只使用了Google Maps v3插件。在包含gmap关键字的示例中，jquery-ui-map插件与Google Map v3结合使用。如果我错过了某些PLZ解释。 –

艾琳，你提到的问题与gmap的例子有关吗？如果是的话，我可以发布一个新的例子与解决方案。谢谢 –

是的，我发现很多例子，比如你使用InfoWindows展示的一个例子，而不使用gmaps。但是使用jQuery-ui-map的语法令我感到困惑。如果您可以在这里发布一个具有多个标记并使用'gmap'的独特infoWindows的示例，这将非常有帮助。谢谢。 – erin

我明白你的意思。对于使用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-23 22:19:54

信息窗口不是唯一的，谷歌地图API V3，jQuery Mobile的

回答

相关问题