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 
}

}

Bing地图显示北美地图的左上角

1 个答案: