4

現在、bing マップ アプリケーションに取り組んでいますが、ユーザーがピンをクリックしたときに情報ボックスが表示されないようです。私はSDKに従ってきましたが、ほぼ同じはずです。私が持っているものは次のとおりです。

// ***********************************
// Function creates a single pin
// and returns a reference to the pin

function createMapPin(latLong, sName) {
    var pinImg = "imagespins/Good.png";


var pin = new Microsoft.Maps.Pushpin(latLong, {
    icon: pinImg,
    anchor: new Microsoft.Maps.Point(8, 8),
    draggable: true,
    width: 48,
    height: 48
});

pin.title = sName;


pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
            { title: 'My Pushpin',
                description: 'This pushpin is located at (0,0).',
                visible: false,
                offset: new Microsoft.Maps.Point(0, 15)
            });



// Add handlers for the pushpin events
   Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
// Hide the infobox when the map is moved.
Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

map.entities.push(pin);
map.entities.push(pinInfobox);

    return pin;
}

function displayInfobox(e) {
    pinInfobox.setOptions({ visible: true });
}


function hideInfobox(e) {
    pinInfobox.setOptions({ visible: false });
}

ピンが作成されてマップに正常に追加され、ユーザーがピンをクリックすると、dispayInfoBox メソッドに入りますが、メッセージボックスは表示されないようです。

どんな提案でも大歓迎です。ありがとう！

4

1 に答える 1

3

あなたのコードは機能します。一度だけ呼び出す限り、試してみましcreateMapPin()た。しかし、あなたのコードから判断すると、あなたの意図はcreateMapPin()複数回呼び出すことであり、これによりinfoboxが思ったように動作しなくなります。その理由は次の行です。

pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
            { title: 'My Pushpin',
                description: 'This pushpin is located at (0,0).',
                visible: false,
                offset: new Microsoft.Maps.Point(0, 15)
            });

pinInfoboxキーワードを介してローカル変数として宣言しなかったためvar、暗黙的にグローバル変数として宣言されます。createMapPin()もう一度呼び出すとすぐpinInfoboxに、グローバル変数であるため、上書きされるため、これはあなたの意図ではないと思い ます。したがって、実際には、新しいインフォボックスを作成し続けても、そのインスタンスは 1 つしかなく、割り当てられた新しい値を取得し続けます。そのため、画鋲をクリックすると、その 1 つの情報ボックスがおそらく画面外のどこかにポップアップ表示され、表示されません。あなたの意図は、各画鋲に 1 つのインフォボックスを関連付けることだと思いますか? これを行うには、次のように情報ボックスをローカル変数として宣言する必要があります。

var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
        { title: 'My Pushpin',
            description: 'This pushpin is located at (0,0).',
            visible: false,
            offset: new Microsoft.Maps.Point(0, 15)
        });

単一のグローバル変数だけでなく、infobox オブジェクトのローカル バージョンと対話するように、イベント ハンドラーを変更する必要もあります。最も簡単な方法は、createMapPin()関数のスコープ内でイベント ハンドラーを無名関数として宣言し、関数バインディングを使用して this キーワードの意味をオーバーライドすることです。

Microsoft.Maps.Events.addHandler(pin, 'click', function (e) {
    this.setOptions({ visible: true });
} .bind(pinInfobox));
Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) {
    this.setOptions({ visible: false });
}.bind(pinInfobox));

更新されたコードは次のとおりです。

function createMapPin(latLong, sName) {
    var pinImg = "imagespins/Good.png";

    var pin = new Microsoft.Maps.Pushpin(latLong, {
        icon: pinImg,
        anchor: new Microsoft.Maps.Point(8, 8),
        draggable: true,
        width: 48,
        height: 48
    });

    pin.title = sName;

    var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
        {
            title: 'My Pushpin',
            description: 'This pushpin is located at (0,0).',
            visible: false,
            offset: new Microsoft.Maps.Point(0, 15)
        });

    // Add handlers for the pushpin events
    Microsoft.Maps.Events.addHandler(pin, 'click', function(e) {
        this.setOptions({ visible: true });
    }.bind(pinInfobox));
    // Hide the infobox when the map is moved.
    Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) {
        this.setOptions({ visible: false });
    }.bind(pinInfobox));
    map.entities.push(pin);
    map.entities.push(pinInfobox);
    return pin;
}
于 2012-04-07T01:29:31.843 に答える