必應地圖顯示北美地圖的左上角

Question

我正在嘗試在地圖的左上角顯示北美/加拿大。

現在，使用mapoptions的中心將無濟於事，因為它會根據屏幕大小而變化。

我通過使用類似的東西進一步亂扔垃圾：

var viewRect = Microsoft.Maps.LocationRect.fromCorners(new Microsoft.Maps.Location(-37.71859032558814, -95.2734375), // african ocean 
            new Microsoft.Maps.Location(63.704722429433225, 101.25)
        );
map.setView({ bounds: viewRect });

現在，這比聚焦在中心更好，因為它在更大的屏幕的左上方顯示了北美，但是屏幕尺寸仍然是一個問題。

是否有人知道任何其他方法可以在屏幕的左上角顯示北美，而與屏幕大小無關？

任何幫助/建議將不勝感激。

Answer 1

這是我所做的，重點放在某些中心，以便根據不同的標准屏幕尺寸在加載過程中修改地圖視圖。

function GetBestViewBasedOnScreenSize() {
var viewportWidth = document.documentElement.clientWidth, viewportHeight = document.documentElement.clientHeight;
console.log("changed the height is " + viewportHeight + " the widht is " + viewportWidth);
console.log('view 1');
if (viewportWidth > 300 && viewportWidth <= 600) {

}
else if (viewportWidth > 300 && viewportWidth <= 1000) {

    console.log('900 - 1200');
    var center = new Microsoft.Maps.Location(26.628887011185398, 27.903637500000013);
    map.setView({ center: center, zoom: 2 });
    console.log('center is ' + '26.628887011185398 27.903637500000013');
}
else if (viewportWidth > 1000 && viewportWidth <= 1200) { // most common 
   var center = new Microsoft.Maps.Location(13.4549, 47.9427);
    map.setView({ center: center, zoom: 2 });
    console.log('center is ' + '13.4549c47.9427');
}
else if (viewportWidth > 1200 && viewportWidth <= 1300) { // for 1280
    var center = new Microsoft.Maps.Location(29.87829481517158, -24.661942570032593);
    map.setView({ center: center, zoom: 3 });
    console.log('center is ' + '29.87829481517158 - 24.661942570032593');
}
else if (viewportWidth > 1300 && viewportWidth <= 1400) { // for 1360
    var center = new Microsoft.Maps.Location(33.322323930108524, -12.533881250000025);
    map.setView({ center: center, zoom: 3 });
    console.log('center is ' + '33.322323930108524 - 12.533881250000025');
}
else if (viewportWidth > 1400 && viewportWidth <= 1500) { // for 1440
    var center = new Microsoft.Maps.Location(18.522390173568184, -3.920600000000025);
    map.setView({ center: center, zoom: 3 });
    console.log('center is ' + '18.522390173568184 - 3.920600000000025');
}
else if (viewportWidth > 1500 && viewportWidth <= 1600) { // for 1600
    var center = new Microsoft.Maps.Location(15.666478131159806, 9.790337499999975);
    map.setView({ center: center, zoom: 3 });
    console.log('center is ' + '15.666478131159806 9.790337499999975');
}
else if (viewportWidth > 1600 && viewportWidth <= 1920) { // for 1920
    var center = new Microsoft.Maps.Location(10.704938710599649, 37.73955624999998);
    map.setView({ center: center, zoom: 3 });
    console.log('center is ' + '10.704938710599649 37.73955624999998');
}
else if (viewportWidth > 1920 && viewportWidth <= 2400) {
    var center = new Microsoft.Maps.Location(4.78563220981988, 47.58330624999998);
    map.setView({ center: center, zoom: 3 });
    console.log('center is ' + '4.78563220981988 47.58330624999998 ');
} else {
    // load world 
}

}