信息窗口不是唯一的，谷歌地圖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的

回答

相關問題