Bing Maps Infobox

时间:2017-01-30 19:40:40

标签: javascript jquery-ui maps bing-maps bing

我使用 BingMaps V8 API创建了多个infoboxes

我在这里遇到的问题是当infobox朝向地图的角落时,infobox的详细信息会被修剪。

信息框被修剪。我想自动拍摄:

enter image description here

代码:

    var ParseLatLogXml = function(xml, address){
    if(typeof xml.resourceSets["0"].resources === "undefined" || xml.resourceSets["0"].resources.length === 0)
    {
    console.log("Lat Long of Address not found: " + address);
     return [];
    }

    return [ xml.resourceSets["0"].resources["0"].geocodePoints["0"].coordinates["0"], 
                 xml.resourceSets["0"].resources["0"].geocodePoints["0"].coordinates["1"] ];
    };

    var AddStore = function( storeNumb ,storeID, storeName, city, state, addr, phone, zip, distance, lat, long){

    var _loc = new Microsoft.Maps.Location(parseFloat(lat), parseFloat(long));
    var _pin = new Microsoft.Maps.Pushpin(_loc, { 

                                                        icon: '-/media/1044109b112b479bb98e4daf6154e817.ashx',
                                                        anchor: new Microsoft.Maps.Point(20, 20) 
                                                    }
    );
    var adder = addr + '\r\n' + city + '\r\n' + zip + state + "\r\n" + storeName
     // Create the infobox for the pushpin
    var _infoBox = new Microsoft.Maps.Infobox(_pin.getLocation(),
    {   width: 300,
     height: 150,
    title: storeName,
    description:  distance + " miles" +'<br>' + addr +'<br>'+ city + " "+ zip +'<br>'+ phone ,
    offset: new Microsoft.Maps.Point(10,15),
    showCloseButton: false,
    visible: false
    });

    // Add handler for the pushpin click event.

    // Microsoft.Maps.Events.addHandler(_pin, 'click', displayInfobox);
    Microsoft.Maps.Events.addHandler(_pin, 'mouseover', function () {
    _infoBox.setOptions({ autoPan:true, visible: true });
    });
    Microsoft.Maps.Events.addHandler(_pin, 'mouseout', function () {
    _infoBox.setOptions({  autoPan:true, visible: false });
              });

map.entities.push(_pin); //[locNum]
        _infoBox.setMap(map);

我尝试使用自动平底锅,我不确定它是否会起作用。 有人可以帮我这个。

我也尝试重新定位ifoboxdinot帮助。

我使用以下链接作为参考:

https://social.msdn.microsoft.com/Forums/sqlserver/en-US/cf803dd2-0f56-429e-863b-9f9a6480ff17/bing-maps-v8-api-repositioning-an-infobox?forum=bingmapsajax

1 个答案:

答案 0 :(得分:0)

Bing Maps中的Infobox类中没有内置的autopan或重新定位逻辑。最简单的解决方案是在打开信息框时将地图置于图钉中心,尽管如果使用点击事件打开信息框而不是鼠标悬停事件,这将更适合。如果信息框位置发生变化,使用mouseover / mouseout事件将导致信息框关闭。

另一种选择是在这里使用自定义信息框模块:http://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control此模块中的信息框根据图钉在地图中的位置重新定位显示方式。如果图钉位于右上角,则信息框会显示在图钉的左下角。您可以在此处找到此模块的源代码:http://bingmapsv7modules.codeplex.com/SourceControl/latest#BMv7Plugins/BMv7.CustomInfobox/scripts/V7CustomInfobox.js