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（），它完全按照它的说法进行操作。

只有一个信息框的实例，它只是重用，而不是为每个标记创建一个新的信息......我怀疑会有很多标记的性能改进。

我仍然乐于接受建议，但现在可以使用...