Question

我可能会在这里提出一个重复的问题，但其他问题都没有我的具体情况......

我正在使用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都包含相同的内容。它始终是打开的第一个标记的内容，给人的印象是InfoBox只是被移动到任何后续点击的标记。

当我在点击的标记上记录InfoBox的内容时：

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

控制台显示相应的内容但该内容与InfoBox的内容不匹配...这就是为什么我这么困惑！

我对此缺少什么？我对jQuery Map UI或InfoBox的理解存在问题吗？

Answer 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（），它完全按照它所说的那样完成。

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

我仍然愿意接受建议，但现在有效......

Jquery Map UI [gmap（）]，InfoBox和Handlebars

1 个答案: