0

我可能在这里问了一个重复的问题，但其他问题都没有我的确切情况......

我正在使用 jQuery Map 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);
});

控制台显示了适当的内容，但该内容与 InfoBox 的内容不匹配……这就是我如此困惑的原因！

我错过了什么？我对 jQuery Map UI 或 InfoBox 的理解有问题吗？

4

1 回答 1

1

好的，我发现我做错了什么，所以我正在回答我自己的问题，但我仍然欢迎任何关于我的解决方案是否可以改进的想法......

这里对其进行了重构：

// 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() ，它完全按照它所说的那样做。

只有一个 infobox 实例，它只是被重用，而不是为每个标记创建一个新实例……我怀疑有很多标记会提高性能。

我仍然对建议持开放态度，但这目前有效......

于 2014-02-06T23:25:32.870 回答