信息框仍然流淌着視圖必應地圖

Question

我試圖做到這一點，以便當用戶點擊地圖上的一個別針時，它集中在該別針上，但是如果信息框太高並且離開視圖，那麼它將重新調整爲偏離地圖的部分。這是代碼，但似乎每次都不正確。某些InfoBoxes到仍在流淌關閉屏幕和dy是提醒回0，所以這裏是代碼：

//Displaying and hiding infobox 
function displayInfobox(e) { 
    if (e.targetType == 'pushpin') { 
     infobox.setLocation(e.target.getLocation()); 
     infobox.setOptions({ 
      visible: true, 
      title: e.target.Title, 
      description: e.target.htmlContent, 
      width: 250, 
      offset: new MM.Point(-3, 0) 
     }); 
     //centering map on pushpin 
     var pinLocation = e.target.getLocation(); 

     map.setView({ 
      center: pinLocation 
     }); 


     infoBoxOrigHeight = $('.Infobox').outerHeight(); 
     infoBoxHeight = $('.Infobox .infobox-body').outerHeight(); 

     var stalkHeight = $('.infobox-stalk').outerHeight(); 

     var newOffset = (infoBoxHeight - infoBoxOrigHeight) + stalkHeight; 

     $('.Infobox').css({ 
      'height': infoBoxHeight, 
       'top': -newOffset 
     }); 


     $('.Infobox').css('height', infoBoxHeight); 

     $('.infobox-stalk').css('top', infoBoxHeight); 


     var buffer = 100; 
     var infoboxOffset = infobox.getOffset(); 
     var infoboxAnchor = infobox.getAnchor(); 
     var infoboxLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control); 
     var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x; 
     var dy = infoboxLocation.y - 100 - infoboxAnchor.y; 

     if (dy < buffer) { //Infobox overlaps with top of map. 
      //Offset in opposite direction. 
      dy *= -1; 
      //add buffer from the top edge of the map. 
      dy += buffer; 
     } else { 
      //If dy is greater than zero than it does not overlap. 
      dy = 0; 
     } 

     if (dx < buffer) { //Check to see if overlapping with left side of map. 
      //Offset in opposite direction. 
      dx *= -1; 
      //add a buffer from the left edge of the map. 
      dx += buffer; 

     } else { //Check to see if overlapping with right side of map. 
      dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - infobox.getWidth(); 
      //If dx is greater than zero then it does not overlap. 
      if (dx > buffer) { 
       dx = 0; 
      } else { 
       //add a buffer from the right edge of the map. 
       dx -= buffer; 
      } 
     } 
     //Adjust the map so infobox is in view 
     alert('dx: ' + dx + ' dy: ' + dy); 
     if (dx != 0 || dy != 0) { 
      map.setView({ 
       centerOffset: new Microsoft.Maps.Point(dx, dy), 
       center: map.getCenter() 
      }); 
     } 
    } 
} 

只是想知道什麼，我錯了實現，這是行不通的，因爲它應該？

Answer 1

我已經爲此完成了一個bing地圖模塊。你可以檢查它here。您可以查看使用示例here。

這裏是模塊的相關代碼：

var infobox = this; 
var mapWidth = _map.getWidth(); 
var mapHeight = _map.getHeight(); 

var point = _map.tryLocationToPixel(infobox.getLocation()); 

var remainderX = (mapWidth/2) - point.x; 
var remainderY = (mapHeight/2) + point.y; 

//Empirical values based on the current infobox implementation 
var xExtraOffset = 33; 
var yExtraOffset = 37; 

var pixelsOutsideX = infobox.getWidth() + infobox.getOffset().x - remainderX - xExtraOffset + _options.horizontalPadding; 
var pixelsOutsideY = infobox.getHeight() + infobox.getOffset().y + yExtraOffset - remainderY + _options.verticalPadding; 

var newPoint = new Microsoft.Maps.Point(0, 0); 

if (pixelsOutsideX > 0) { 
    newPoint.x += pixelsOutsideX; 
} 

if (pixelsOutsideY > 0) { 
    newPoint.y -= pixelsOutsideY; 
} 

var newLocation = _map.tryPixelToLocation(newPoint); 

_map.setView({ 
    center: new Microsoft.Maps.Location(newLocation.latitude, newLocation.longitude) 
});