Bing映射未在Localhost MVC应用程序上显示

问题描述 投票:0回答:1

我正在构建一个示例MVC4 Web应用程序,我的目标是学习和掌握Bing Maps API的工作,但恐怕它进展不顺利。

我正在追踪this tutorial,但是当我重新加载页面时,我没有得到一张地图,该地图应该显示在这里,我只会看到空白的背景色!即使在获取API密钥并将其放入我页面中的脚本之后!没有地图显示!

这是我的脚本代码:

<script type="text/javascript">
var map = null;

function getMap()
{
    var boundingBox = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -122.347584), new Microsoft.Maps.Location(47.622052, -122.345869));
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'MyKeyGoesHere', bounds: boundingBox });
}
</script>
asp.net-mvc-4 bing-maps
1个回答
1
投票

实现中有几件事情要考虑。

  1. 将脚本引用添加到Bing Maps API
  2. 在您的网页中添加HTML元素和必需的信息
  3. 添加加载事件并触发您的getMap()方法(使用在主体上设置的onload事件或通过代码动态地设置)

请参阅MSDN,以在您的第一个实施中为您提供帮助:http://msdn.microsoft.com/en-us/library/gg427624.aspx

这里是示例静态页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    </script>
    <script type="text/javascript">
        var map = null;

        function getMap() {
            var boundingBox = Microsoft.Maps.LocationRect.fromLocations(
                new Microsoft.Maps.Location(47.618594, -122.347618), 
                new Microsoft.Maps.Location(47.620700, -122.347584), 
                new Microsoft.Maps.Location(47.622052, -122.345869));

            map = new Microsoft.Maps.Map(
                document.getElementById('myMap'), 
                { 
                    credentials: 'YOURKEY', 
                    bounds: boundingBox 
                });
        }

    </script>
</head>
<body onload="getMap();">
    <div id="myMap" style="position: relative; width: 800px; height: 600px;">
    </div>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.