jQuery的地圖UI [GMAP（）]，資訊盒和把手

Question

我可以在這裏提出一個重複的問題，但沒有其他問題，我有確切的情況...

我使用jQuery UI地圖，以輸出JSON用InfoBox替換默認的infoWindows以便用Handlebars填充它們。

這是我的代碼，下面是我的問題。我儘可能地發表評論。

// instantiate some variables to hold the array of markers and 
    // the array of infoboxes 
    var markers = []; 
    var infoBoxes = []; 

    // Instantiate a Handlebar template to create the content of the infoboxes 
    var infoWindowTemplate = $('#infowindow-template').html(); 
    infoWindowTemplate = Handlebars.compile(infoWindowTemplate); 

    $.each(json, function(i, m) { 

     // add a marker ID to the JSON such that it can be returned and the 
     // modified JSON be used to build a summary list with links to each 
     // of the markers 
     json[i].marker_id = 'rig-marker-' + i; 

     // create a new infoBox with content generated with Handlebars 
     var infoBox = new InfoBox({ 
      content: infoWindowTemplate(m), 
      alignBottom: true, 
      disableAutoPan: false, 
      maxWidth: 280, 
      pixelOffset: new google.maps.Size(-140, -45), 
      closeBoxURL: "img/close-btn.png", 
      infoBoxClearance: new google.maps.Size(50, 50), 
      enableEventPropagation: true 
     }); 

     // add the infobox to the 'global' array 
     infoBoxes.push(infoBox); 

     // create the marker using the markerID from the modified json 
     var marker = map.gmap('addMarker', { 
      'position': new google.maps.LatLng(m.latitude, m.longitude), 
      'bounds': true, 
      'id': json[i].marker_id, 
      'icon': 'img/spot-icon.png', 
      'title': m.title 
     }) 

     // add a click handler to the marker and assign the infoBox as the 
     // content 
     marker.click(function() { 
      map.gmap('openInfoWindow', infoBoxes[i], this); 
     }); 

     // add the current marker to the markers array in preparation 
     // for being passed to the marker clusterer. 
     markers.push(marker[0]); 
    }); 

所以我的問題是，每個信息框包含相同的內容。它總是打開第一個標記的內容，給人的印象是InfoBox只是被移動到任何後續點擊標記。

當我登錄時被點擊信息框上的標誌內容：

marker.click(function() { 
    console.log(infoBoxes[i]); 
    map.gmap('openInfoWindow', infoBoxes[i], this); 
}); 

控制檯顯示相應的內容，但內容不匹配，信息框......這就是爲什麼我如此的困惑！

我對此有什麼想法？我對jQuery Map UI或InfoBox的理解有問題嗎？

Answer 1

OK，我發現我在做什麼錯的，所以我回答我的問題，但我仍然會歡迎任何想法，因爲我的解決方案是否能改善...

這被重構：

// instantiate an array for the markers 
var markers = []; 

// Instantiate a Handlebar template to create the content of the infoboxes 
var infoWindowTemplate = $('#infowindow-template').html(); 
infoWindowTemplate = Handlebars.compile(infoWindowTemplate); 

// get the map object from the canvas in order to 
var mapObject = map.gmap('get', 'map'); 

// create the infobox instance with all of the settings in place 
// the content will be replaced on each click but the other seetings 
// stay the same 
var infoBox = new InfoBox({ 
    content: "<p>Empty</p>", 
    alignBottom: true, 
    disableAutoPan: false, 
    maxWidth: 280, 
    pixelOffset: new google.maps.Size(-140, -45), 
    closeBoxURL: "img/close-btn.png", 
    infoBoxClearance: new google.maps.Size(50, 50), 
    enableEventPropagation: true 
}); 

$.each(json, function(i, m) { 

    // collect together the variables needed for adding the markers 
    var latLng = new google.maps.LatLng(m.latitude, m.longitude); 
    var id = 'rig-marker-' + i 
    var title = m.title; 
    var html = infoWindowTemplate(m); 

    var marker = map.gmap('addMarker', { 
     'position': latLng, 
     'bounds': true, 
     'id': id, 
     'icon': 'img/spot-icon.png', 
     'title': title 
    }).click(function() { 
     // overwrite the content of the infoBox 
     infoBox.setContent(html); 
     // open the infobox 
     infoBox.open(mapObject, this); 
    }); 

    // add a marker ID to the JSON such that it can be linked with 
    // other site content 
    json[i].marker_id = id; 

    // add the current marker to the markers array in preparation 
    // for being passed to the marker clusterer. 
    markers[i] = marker[0]; 
}); 

因此，InfoBox帶有一個方法setContent（），它完全按照它的說法進行操作。

只有一個信息框的實例，它只是重用，而不是爲每個標記創建一個新的信息......我懷疑會有很多標記的性能改進。

我仍然樂於接受建議，但現在可以使用...