ツールチップとしてインフォボックスを使用しようとしています。私は上記のマウスが押されている押さえにインフォボックスを表示したい。Bing Maps v8 - マップがズームアウトされたときにInfoboxが予想された場所に表示されない
マップが十分にズームインされていると、この機能はうまくいくように見えますが、マップがズームアウトされると、インフォボックスがビューポートから外れることがあります(インフォボックスはマップが水平方向に移動したように動作します)。
は、それはほとんどすべての方法をズームアウトしているためマップは単純に、自分自身にラップしているというのが私の疑いです。おそらく、マップ・キャンバス上に重複した座標があることを意味しますが、ビュー・ポートには表示されません。
マップキャンバス上に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
は同じ問題を生じます。
更新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)
];
おかげで、あなたの迅速な回答rbrundrittのための非常に多くを、不要なマップオプションを削除する方法あなたのアドバイスに感謝を使用していません。残念ながら私の問題はTestDataGeneratorではありません。ハードコードされた座標を使用して問題を示すための編集を追加しました.2番目のスクリーンショットを参照してください。 –
私が提供したプッシュピンの配列を使用して問題を再現することはできません。それは私のために完璧に動作します。 TestDataGeneratorの問題は、すべてのプッシュピンがレンダリングされているわけではないので、最初は間違った場所にあるように見えます。 – rbrundritt
私はChromeで作業しています。あなたの最後のコメントは、別のブラウザでこれを試してみるよう促しました。実際、Internet Explorerで完全に機能します。それから、私は同僚にそれを試してもらうように頼んだのですが、その結果は逆でした(IEで壊れたChromeでの作業)。言うまでもなく、私は困惑しています。 –