虚拟地球 - 只有地图不渲染答案

【问题标题】：virtual earth - Only map is not rendering虚拟地球 - 只有地图不渲染
【发布时间】：2014-09-02 13:38:02
【问题描述】：

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

我怀疑对 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>

非常感谢您的帮助。

【问题讨论】：

你能不能梳理一下，这和你机器上的显卡（硬件）有关？
@Marcel：我相信这不是硬件问题，因为问题也在另一台机器上。同样的实现在我的其他项目中运行良好
@ShubhamBhave tuch ye na subhya ha?

标签： javascript css asp.net bing-maps virtual-earth

【解决方案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 地图密钥，您可以通过在 Bing 地图门户中创建一个 Bing 地图帐户来获得一个：http://bingmapsportal.com 以下是有关创建密钥的一些文档：http://msdn.microsoft.com/en-us/library/ff428642.aspx

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

【讨论】：

感谢您的回答。我只能使用 6.2。我添加了 'map.SetCredentials('YOUR_BING_MAPS_KEY');'连同我的有效密钥。但结果仍然相同。关于 CSS，我已经为 div 添加了 CSS。但问题仍然存在
好的。 6.2 不存在。几年前它已从服务器中删除，现在重定向到 6.3。您是否尝试过测试一个只加载地图的简单应用程序？如果您仍然看到问题，请尝试清除缓存。另外，尝试观察网络流量，看看是否正在请求和加载图像。您的网络中可能有某些东西阻止了对磁贴的访问。另外，找出图钉指向的位置。像减号这样简单的事情可以将您的别针放在海洋中，从而使背景变暗。
好的，现在我发现地图正在显示在 safari 浏览器上。（与上面相同的配置）。问题不在于图钉。因为，即使大头针指向海洋中的某个地方，我也可以缩小以查看地图。所以，我接受你的假设，即有什么东西挡住了瓷砖。但除了野生动物园..
还有几件事要检查。您是否为 UTF-8 添加了元标记。还可以尝试使用此处记录的 Doctype：msdn.microsoft.com/en-us/library/gg427624.aspx 如果这是在线托管的某个我可以访问它的地方，我很乐意尝试为您调试它。可能会更快。如果您愿意，可以通过 Hotmail.com 的 ricky_brundritt 将信息通过电子邮件发送给我
是的，我已经添加了元标记和文档类型。这不是问题。经过大量研究后，我发现问题出在 CSS 上。 ecn.dev.virtualearth.net/mapcontrol/v6.3/css 内的 mapcontrol.css 有一个地图容器类 - .MSVE_Map 具有属性 position:absolute 我已经覆盖到 position:relative 这实际上解决了问题..奇怪.. ;)

【解决方案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，这实际上解决了问题..

【讨论】：