0

ここで重複した質問をしている可能性がありますが、他の質問には私の正確な状況はありません...

JSON を出力するために jQuery Map UI を使用し、デフォルトの infoWindows を InfoBox に置き換えてハンドルバーを設定しています。

これが私のコードで、以下が私の問題です。出来るだけコメントしてみました。

    // 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]);
    });

したがって、私の問題は、各 InfoBoxes に同じコンテンツが含まれていることです。開かれるのは常に最初のマーカーのコンテンツであり、InfoBox が単に後続のクリックされたマーカーに移動されているような印象を与えます。

クリックされたマーカーの InfoBox の内容をログに記録すると:

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

コンソールには適切なコンテンツが表示されますが、そのコンテンツは InfoBox のコンテンツと一致しません。これが、私が混乱している理由です。

これについて何が欠けていますか？jQuery Map UI または InfoBox の理解に問題がありますか?

4

1 に答える 1

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() メソッドが付属しており、その内容を正確に実行します。

インフォボックスのインスタンスは 1 つしかなく、マーカーごとに新しいインスタンスが作成されるのではなく、再利用されるだけです...マーカーがたくさんあるとパフォーマンスが向上すると思います。

私はまだ提案を受け付けていますが、これは今のところうまくいきます...

于 2014-02-06T23:25:32.870 に答える