2016-07-11 13 views
1

ツールチップとしてインフォボックスを使用しようとしています。私は上記のマウスが押されている押さえにインフォボックスを表示したい。Bing Maps v8 - マップがズームアウトされたときにInfoboxが予想された場所に表示されない

マップが十分にズームインされていると、この機能はうまくいくように見えますが、マップがズームアウトされると、インフォボックスがビューポートから外れることがあります(インフォボックスはマップが水平方向に移動したように動作します)。

see here

は、それはほとんどすべての方法をズームアウトしているためマップは単純に、自分自身にラップしているというのが私の疑いです。おそらく、マップ・キャンバス上に重複した座標があることを意味しますが、ビュー・ポートには表示されません。

マップキャンバス上に1回しか表示されない座標のプッシュピンは、インフォボックスを正しい場所に表示します。

誰かがこれについていくつか光を当てることができますか?どんな助けもありがとうございます。

私のコードの基本バージョンは以下のとおりです。ハードコード化された座標値を優先してTestDataGenerator取り外し

var map; 
 
function loadMapScenario() { 
 
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
 
     credentials: 'api key', 
 
     maxZoom: 2, 
 
     enableSearchLogo: false, 
 
     disableBirdseye: true, 
 
     showDashboard: false, 
 
     showMapLabel: true, 
 
     showScalebar: false, 
 
     disablePanning: true, 
 
     disableZooming: true, 
 
     disableKeyboardInput: true, 
 
     disableMouseInput: false, 
 
     disableTouchInput: true, 
 
     disableUserInput: false 
 
    }); 
 

 
    var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds()); 
 

 
    var infoBox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), { title: 'title', 
 
    description: 'description', showCloseButton: false }); 
 

 
    infoBox.setMap(map); 
 

 
    for (var i = 0; i < pushpins.length; i++) { 
 
     var pushpin = pushpins[i]; 
 

 
     Microsoft.Maps.Events.addHandler(pushpin, "mouseover", function (e) { 
 
      infoBox.setLocation(e.target.getLocation()); 
 
     }); 
 
    } 
 

 
    map.entities.push(pushpins); 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Bing Maps Full Width</title> 
 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
 
    </head> 
 
    <body> 
 
     
 
     <div id='myMap' style='width: 100%; height: 500px;'></div> 
 
     <script type='text/javascript' src='js/maps.js'></script> 
 
     <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script> 
 
    </body> 
 
</html>

EDIT

は同じ問題を生じます。

See here.

更新JSは:

map = new Microsoft.Maps.Map(document.getElementById('myMap'), { 
    credentials: 'api key', 
    maxZoom: 2, 
    disableBirdseye: true, 
    showDashboard: false, 
    showMapLabel: true, 
    showScalebar: false, 
    disablePanning: true, 
    disableZooming: true 
}); 

var pushpins = [ 
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, -79.08), null), 
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, 108.51), null), 
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, 95.03), null), 
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, -134.58), null) 
]; 

答えて

0

TestDataGeneratorとすべての方法をズームアウト "世界ラップ" の既知の問題があります。地図上に10個のプッシュピンがすべて表示されるわけではありません。インフォボックスが正しい位置に表示されていますが、押しピンはレンダリングされていません。

また、必要とされないいくつかあります地図のオプションを探して:

  • enableSearchLogoは - V8には、検索のロゴはありません。
  • disableBirdseye - BirdseyeはV8ではまだ利用できません。新しい の経験と画像が今年の後半に公開されました。 birdseye がリリースされたら、このオプションが公開される可能性があります。後で変更する必要はないので、 にこのコードを残すことができます。
  • disableKeyboardInput/disableMouseInput/disableTouchInput/disableUserInput V8
+0

おかげで、あなたの迅速な回答rbrundrittのための非常に多くを、不要なマップオプションを削除する方法あなたのアドバイスに感謝を使用していません。残念ながら私の問題はTestDataGeneratorではありません。ハードコードされた座標を使用して問題を示すための編集を追加しました.2番目のスクリーンショットを参照してください。 –

+0

私が提供したプッシュピンの配列を使用して問題を再現することはできません。それは私のために完璧に動作します。 TestDataGeneratorの問題は、すべてのプッシュピンがレンダリングされているわけではないので、最初は間違った場所にあるように見えます。 – rbrundritt

+0

私はChromeで作業しています。あなたの最後のコメントは、別のブラウザでこれを試してみるよう促しました。実際、Internet Explorerで完全に機能します。それから、私は同僚にそれを試してもらうように頼んだのですが、その結果は逆でした(IEで壊れたChromeでの作業)。言うまでもなく、私は困惑しています。 –

関連する問題