虚拟地球-仅地图未渲染

Question

我正面临着这个奇怪的问题。 bing map没有显示在我的页面上，因为所有控件甚至pushpins正确显示。
我在Google上搜索了很多，同样的功能在我的其他项目中也很好用

我怀疑对dev.virtualearth.net的引用有问题，或者我丢失了某些内容

这是我的代码：ASCX（位于动态生成的aspx的内容占位符内部）：

<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=de-de">
</script>

<div>
       .
       .
       .
       <div id="bigMapContainer">
                <div id="eventMap">
                </div>
       </div>

</div>

后面的代码：

string script = @"
            function GetVEMap() {
               map = new VEMap('eventMap');
               map.SetDashboardSize(VEDashboardSize.Small);
               map.LoadMap();
               DisplayEventsOnMap();
            }

   function DisplayEventsOnMap() {
                var eventMapLayer = new VEShapeLayer();
                eventMapLayer.Id = 'eventMapLayer';
                var points = null;
                       .
                       .
                       .
                //Code to get the data for pin display etc
                       .
                       .
               map.AddShapeLayer(eventMapLayer);
               map.SetMapView(eventMapLayer.GetBoundingRectangle());
               map.SetZoomLevel(15);

              });
            }

            $(window).load(function() {
                       GetVEMap();
                      }
            );";

     ScriptManager.RegisterStartupScript(this, typeof(Page), "MapDisplay", script, true);

CSS：

   #bigMapContainer {display: block;}
   #eventMap { position: absolute; width: 550px height: 500px; }

我在母版页上添加了一些与地图无关的参考， 但可能与我的地图实现冲突 （？）

<script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.responsivemenu.js"></script>
<script type="text/javascript" src="/js/client.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>

非常感谢您的帮助。

Answer 1

首先，您似乎要指向几年前已过时的Virtual Earth 6.2，现在它指向v6.3。 也就是说，v6.3确实很旧，不建议用于新的开发项目。 如果这是一个新项目，则应使用Bing Maps V7，它是Bing Maps的最新和最好版本（Virtual Earth在2009年重命名为Bing Maps）。 V7更快，功能更多，体积也更小。

假设这是一个刚刚开始出现问题的现有项目。 查看您的代码，我立即注意到的一件事是，加载地图时未指定凭据。 这是必需的。 在调用LoadMap方法之前，应该有如下代码：

map.SetCredentials('YOUR_BING_MAPS_KEY');

如果您没有Bing Maps密钥，则可以通过在Bing Maps门户中创建Bing Maps帐户来获得一个： http : //bingmapsportal.com这是一些有关创建密钥的文档： http : //msdn.microsoft.com /en-us/library/ff428642.aspx

接下来，eventMap div，您为此指定任何样式吗？ 它应具有以CSS类或内联样式指定的位置，宽度和高度。 没有这个，您将在某些浏览器中得到奇怪的渲染。

Answer 2

经过大量的研究，我发现问题出在CSS上。 感谢@rbrunditt的帮助

mapcontrol.css内部http://ecn.dev.virtualearth.net/mapcontrol/v6.3/css/bin/6.3.20091207154938.04/de/mapcontrol.css具有用于地图容器-一类.MSVE_Map具有属性position:absolute ，这会使图块显示在屏幕之外。

我将类重写为position:relative ，实际上解决了这个问题。