Fatal编程技术网
  • maps/
  • Maps Bing地图多边形信息框

Maps Bing地图多边形信息框

maps

Maps Bing地图多边形信息框,maps,bing-maps,bing,infobox,Maps,Bing Maps,Bing,Infobox,我已经设置了一个地图，地图上的国家周围都有多边形，我想添加一个信息框，这样悬停时每个国家都会显示一些信息 如果没有多边形，我可以很容易地显示信息框，但是当将它们指定给PolygonOptions类时，什么也不会发生。文档中说，只要我加载了Bing主题模块（我确实加载了），信息框就会显示在鼠标悬停和单击上 这方面的文档/示例似乎为零，希望你们这些聪明的人能提供帮助 这里是一些相关的代码 var center = this.map.getCenter(); // Create an

我已经设置了一个地图，地图上的国家周围都有多边形，我想添加一个信息框，这样悬停时每个国家都会显示一些信息

如果没有多边形，我可以很容易地显示信息框，但是当将它们指定给PolygonOptions类时，什么也不会发生。文档中说，只要我加载了Bing主题模块（我确实加载了），信息框就会显示在鼠标悬停和单击上

这方面的文档/示例似乎为零，希望你们这些聪明的人能提供帮助

这里是一些相关的代码

    var center = this.map.getCenter();

    // Create an info box 
    var infoboxOptions = {
        width: 300,
        height: 100,
        title: 'Testing', // sourceItems.data.dataset[0].data[index].key,
        description: "Visits: 20", // + sourceItems.data.dataset[0].data[index].visits,
        showPointer: true,
        titleClickHandler: this.polygonInfo,
        offset: new Microsoft.Maps.Point(-100, 0),
        typeName: Microsoft.Maps.InfoboxType.mini,
        zIndex: 1000
    };
    var polyinfobox = new Microsoft.Maps.Infobox(center, infoboxOptions);

    var polygonOptions = {
        fillColor: Microsoft.Maps.Color.fromHex(fillColour),
        strokeColor: Microsoft.Maps.Color.fromHex(fillColour),
        strokeThickness: 1,
        infobox: polyinfobox
    };

    var result = new Microsoft.Maps.Polygon(vertices, polygonOptions);
Bing Maps V7控件的交互式SDK中有一个工作代码示例：

请注意，为每个形状创建信息框效率很低，如果有很多形状，则会影响性能。更好的方法是使用一个信息框并动态填充其数据。我在这里写了一篇博文：如果你想使用这种方法，这里有一个代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
        var map, dataLayer, infobox;

        function GetMap()
        {  
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
                credentials: "YOUR_BING_MAPS_KEY"
            });

            dataLayer = new Microsoft.Maps.EntityCollection();
            map.entities.push(dataLayer);

            var infoboxLayer = new Microsoft.Maps.EntityCollection();
            map.entities.push(infoboxLayer);

            infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
            infoboxLayer.push(infobox);

            AddData();
        }

        function AddData(){
            var polygon = new Microsoft.Maps.Polygon([
                new Microsoft.Maps.Location(45, -110), 
                new Microsoft.Maps.Location(65, -90), 
                new Microsoft.Maps.Location(45, -70)]);     

            polygon.Metadata = {
                title: 'Hello',
                description: 'World'
            };

            dataLayer.push(polygon);

            Microsoft.Maps.Events.addHandler(polygon, 'click', displayInfobox);
            Microsoft.Maps.Events.addHandler(polygon, 'mouseover', displayInfobox);
        }

        function displayInfobox(e){
            if(e.target){
                var point = new Microsoft.Maps.Point(e.getX(), e.getY());       
                var loc = map.tryPixelToLocation(point);

                infobox.setLocation(loc);

                var opt = e.target.Metadata;

                if(opt){
                    if(e.target.getIcon){ //is pushpin
                        opt.offset = new Microsoft.Maps.Point(0,20);
                    }else{
                        opt.offset = new Microsoft.Maps.Point(0,0);
                    }

                    opt.visible = true;
                    infobox.setOptions(opt);
                }
            }
        }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:600px; height:600px;"></div> 
   </body>
</html>


var映射、数据层、信息盒；
函数GetMap（）
{  
map=new Microsoft.Maps.map（document.getElementById（“mapDiv”）{
凭据：“您的\u BING\u地图\u密钥”
});
dataLayer=新的Microsoft.Maps.EntityCollection（）；
map.entities.push（数据层）；
var infoboxLayer=new Microsoft.Maps.EntityCollection（）；
map.entities.push（infoboxLayer）；
infobox=new Microsoft.Maps.infobox（new Microsoft.Maps.Location（0,0），{visible:false}）；
infoboxLayer.push（infobox）；
AddData（）；
}
函数AddData（）{
var polygon=新的Microsoft.Maps.polygon([
新的Microsoft.Maps.Location（45，-110），
新的Microsoft.Maps.Location（65，-90），
新微软地图位置（45，-70）]；
多边形。元数据={
标题：“你好”，
描述：“世界”
};
数据层推送（多边形）；
Microsoft.Maps.Events.addHandler（多边形“单击”，显示信息框）；
Microsoft.Maps.Events.addHandler（多边形，'mouseover'，displayInfobox）；
}
功能显示信息框（e）{
如果（如目标）{
var point=new Microsoft.Maps.point（e.getX（），e.getY（））；
var loc=映射锥虫色（点）；
信息框。设置位置（loc）；
var opt=e.target.Metadata；
如果（选择）{
如果（e.target.getIcon）{//是图钉
opt.offset=新的Microsoft.Maps.Point（0,20）；
}否则{
opt.offset=新的Microsoft.Maps.Point（0,0）；
}
opt.visible=true；
infobox.setOptions（opt）；
}
}
}
啊，传奇，谢谢。我自己也把类似的东西拼凑起来了，但这要干净得多。