javascript - 如何设置 bing map 上单个位置的缩放级别

Question

我有以下 js 对象:

virtualEarthBingMap = {
map : "",
propertiesDataArray : [],
locations : [],
initialLatLong : "",
initialZoom : "",
isInitialized : false,
MM : "",
overMap : false,
init : function(){  
},

addLoadEvent : function(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
            window.onload = function() {
                oldonload();
                func();
            }
    }
},

pushpinObj : function(){
    this.number;
    this.lat;
    this.longitude;
    this.type;
    this.iconstyle;
},

generatePushpinData : function(rowCount){
    if(rowCount == undefined){
        rowCount = "";
    }

    //initiate hidden field objects
    var pushPinNumberObj = document.getElementsByName("pushpin-number"+rowCount);
    var pushPinLatObj = document.getElementsByName("pushpin-lat"+rowCount);
    var pushPinLongObj = document.getElementsByName("pushpin-long"+rowCount);
    var pushPinTypeObj = document.getElementsByName("pushpin-type"+rowCount);
    var pushPinIconStyleObj = document.getElementsByName("pushpin-iconstyle"+rowCount);
    for(i=0; i < pushPinNumberObj.length; i++){ 

        var propertyData = new virtualEarthBingMap.pushpinObj;
        propertyData.number = Number(pushPinNumberObj[i].value);
        propertyData.lat = pushPinLatObj[i].value;
        propertyData.longitude = pushPinLongObj[i].value;
        propertyData.type = pushPinTypeObj[i].value;
        if(pushPinIconStyleObj!= null && pushPinIconStyleObj.length>0){
          propertyData.iconstyle = pushPinIconStyleObj[i].value;
        }

        virtualEarthBingMap.propertiesDataArray.push(propertyData);
    }       

},
mouseEvent: function (e){
    if(e.eventName == 'mouseout')
       virtualEarthBingMap.overMap = false;    
    else if(e.eventName == 'mouseover')
       virtualEarthBingMap.overMap = true;
    },

//renders VEMap to myMap div    
getMap: function (mapObj, rowCount) {
    if(rowCount == undefined){
        rowCount = "";
    }

    try{
        virtualEarthBingMap.MM = Microsoft.Maps;
        //Set the map options
        var mapOptions = {  credentials:document.getElementById("bingKey"+rowCount).value,
                            mapTypeId: virtualEarthBingMap.MM.MapTypeId.road,
                            enableClickableLogo: false,
                            enableSearchLogo: false,
                            tileBuffer: Number(document.getElementById("tileBuffer"+rowCount).value)};

        virtualEarthBingMap.map = new virtualEarthBingMap.MM.Map(document.getElementById("map"+rowCount), mapOptions);      

        var dataLayer = new virtualEarthBingMap.MM.EntityCollection();
        virtualEarthBingMap.map.entities.push(dataLayer);

        var pushpinOptions,pushpin,propertyData;

        for(var x=0; x < virtualEarthBingMap.propertiesDataArray.length; x++){
            propertyData = virtualEarthBingMap.propertiesDataArray[x];

            if(document.getElementsByName(("pushpin-iconstyle"+rowCount)).length > 0)//All other maps push pins

            {       
                pushpinOptions ={icon: mapObj.getCustomIcon(propertyData.iconstyle)};
            }
            else//classic search map push pin
            {
                pushpinOptions ={icon: mapObj.getCustomIcon(propertyData.type)};
            }

            // creating a pushpin for every property
            pushpin = new virtualEarthBingMap.MM.Pushpin(new virtualEarthBingMap.MM.Location(Number(propertyData.lat), Number(propertyData.longitude)), pushpinOptions);
            pushpin.setOptions({typeName:("pushpin"+rowCount)});

            // set pushpin on map
            dataLayer.push(pushpin);

            // adding to locations array to be used for setMapView when there are more than one property on a map
            virtualEarthBingMap.locations.push(new virtualEarthBingMap.MM.Location(Number(propertyData.lat), Number(propertyData.longitude)));
        };

        //Handle blur event for map
        if(rowCount == ""){
            $("html").click(function() {
              if(!virtualEarthBingMap.overMap)
                 virtualEarthBingMap.map.blur();              
            });
        }

        //Set the events for map, pushpin and infobox
        virtualEarthBingMap.map.blur();//Removes focus from the map control
        virtualEarthBingMap.MM.Events.addHandler(pushpin, 'mouseover', function (e) { virtualEarthBingMap.displayInfobox(e, rowCount)});
        virtualEarthBingMap.MM.Events.addHandler(pushpin, 'click', function (e) { virtualEarthBingMap.displayInfobox(e, rowCount)});
        virtualEarthBingMap.MM.Events.addHandler(virtualEarthBingMap.map, 'viewchangeend', virtualEarthBingMap.hideInfobox);
        virtualEarthBingMap.MM.Events.addHandler(virtualEarthBingMap.map, 'mouseout', virtualEarthBingMap.mouseEvent);
        virtualEarthBingMap.MM.Events.addHandler(virtualEarthBingMap.map, 'mouseover', virtualEarthBingMap.mouseEvent);

        //Plot the  pushpin
        mapObj.setMapView();

    }catch(e){
        mapObj.displayMapError(rowCount);
    }
    //clean up properties data array
    virtualEarthBingMap.propertiesDataArray = [];

},
//returns flyout info id        
getFlyoutId : function(lat, longitude, rowCount){
    if(rowCount == undefined){
        rowCount = "";
    }
    try{
        var flyoutId = "flyout"+rowCount+"[" + lat + "][" + longitude + "]";
        return flyoutId
    }catch(e){}
},
//Show info box
displayInfobox: function (e, rowCount) {

  var disableToolTip = $('#disableToolTip').val();

  if ((disableToolTip == undefined || disableToolTip == "" || disableToolTip == 'false') && e.targetType == 'pushpin') {

    virtualEarthBingMap.hideInfobox();

    if(rowCount == undefined){
        rowCount = "";
    }

    var flyoutLat = $("input[name='pushpin-lat"+rowCount+"'][type='hidden']").val();
    var flyoutLong = $("input[name='pushpin-long"+rowCount+"'][type='hidden']").val();
    var flyoutId = virtualEarthBingMap.getFlyoutId(flyoutLat,flyoutLong, rowCount);
    var infobox = document.getElementById(flyoutId);
    $(infobox).css("display","inline"); 
    $(infobox).css("z-index","10000"); 
    $(infobox).css("position","absolute"); 

    var pushpinPosition;
    if(rowCount != "") 
    {
        pushpinPosition = $('.pushpin'+rowCount).offset();
        $(infobox).css("top",pushpinPosition.top + "px");
        $(infobox).css("left",pushpinPosition.left + "px");
    } else {
        //original position
        pushpinPosition = virtualEarthBingMap.map.tryLocationToPixel(e.target.getLocation(), virtualEarthBingMap.MM.PixelReference.page);
        $(infobox).css("top",(pushpinPosition.y-40) + "px");
        $(infobox).css("left",(pushpinPosition.x-5) + "px");
    }

    $('body').append(infobox);     
    setTimeout(virtualEarthBingMap.hideInfobox,12000); //hide infobox after 12 sec
  }
},
//Hide infobox
hideInfobox: function () {
    $('.display-off').css("display","none"); 
}
}//End virtualEarthBingMap

我正在尝试将 bing map 设置为放大某个位置，现在我正在使用此脚本来区分单个位置和多个位置:

setMapView: function () {
    if (virtualEarthBingMap.locations.length > 1) {
      // set mapview for multiple hotels that dynamically sets the zoom so all pushpins are shown in ititial map window
          virtualEarthBingMap.map.setView({bounds:virtualEarthBingMap.MM.LocationRect.fromLocations(virtualEarthBingMap.locations),padding:10});
    } else {
      // set mapview for single hotel
      virtualEarthBingMap.map.setView({center:new Microsoft.Maps.Location(virtualEarthBingMap.propertiesDataArray[0].lat,virtualEarthBingMap.propertiesDataArray[0].longitude),zoom:15});
    }
}

这适用于多个位置，但不适用于单个位置。大家有什么想法吗？

Answer 1

除非 map 宽度小于 20 像素，否则 10 的填充不会对缩放级别产生影响。一个简单的解决方案是设置缩放级别。我建议单个位置的缩放级别为 15 或 16。