Bing Mapsの情報ボックス

Question

現在、私はbing mapsアプリケーションを開発中です。ユーザーがピンをクリックしたときに情報ボックスが表示されないようです。私は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 }); 
} 

ピンが作成され、正常にマップに追加し、ユーザーがピンをクリックするとそれだけで表示されているように見えるdoesntのdispayInfoBox方法が、メッセージボックスを入力します。

どのような提案も大きく反応します。ありがとう！

Answer 1

あなたのコードは動作しますが、あなたはcreateMapPin()を1回だけ呼び出す限り、試してみました。しかし、あなたのコードであなたの意図を判断するのは、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) 
      }); 

あなたはvarキーワードを介してローカル変数としてpinInfobox宣言していないことから、それは暗黙的にグローバル変数として宣言されます。 createMapPin()にもう一度電話をかけるとすぐに、pinInfoboxはグローバル変数であるため、上書きされるため、これはあなたの意思ではないと思います。つまり、新しいinfoboxの作成を続けても、そのインスタンスは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) 
     }); 

あなたはまた、ローカルインフォボックスオブジェクトのバージョンだけではなく、単一のと対話するためにあなたのイベントハンドラを変更する必要がありますグローバル変数。最も簡単な方法は、結合だけの機能を使用してcreateMapPin()関数のスコープに匿名関数として、あなたのイベントハンドラを宣言し、このキーワードの意味をオーバーライドすることである：

：

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; 
}