Asp.net mvc 2 没有可见的openstreetmap，为什么？

我正在尝试使用openstreetmap而不是google地图，但没有地图可见。当我用html站点测试几乎相同的代码时，它可以工作，但在我的mvc2应用程序中不工作。为什么

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<TDXWeb.ViewModel.MapViewModel>" %>

<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript" src="pathTo/OpenLayers.js"></script> 
    <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>    

    <script type="text/javascript">

        function initializeMap()
        {
            var lat = 47.496792
            var lon = 7.571726
            var zoom = 13

            var map;
            /* Create Map */

            // Create a map with some default values that will be altered later
            map = new OpenLayers.Map (document.getElementById(
            "map_canvas"), {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );            

            // Define the map layer
            // Here we use a predefined layer that will be kept up to date with URL changes
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik);
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            map.addLayer(layerCycleMap);
            layerMarkers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(layerMarkers);         

            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            map.setCenter(lonLat, zoom);

            var size = new OpenLayers.Size(21, 25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
            layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));

            $('#map_canvas').resizable();            
        }      
    </script>

    <script type="text/javascript">
        $(document).ready(function() {

            initializeMap();

        });    
    </script>
    <div class="formitemmap">
    <h3>Karta</h3>

    <div class="text">Här kan du se dina fordon. Välj vilka du vill ska visas på kartan.</div>

    <div id="map_canvas" style="min-width: 1050px; min-height: 1050px; float:left;"></div>

    <% using (Html.BeginForm("DisplayClientMap", "Map", FormMethod.Post))
    {%>
        <% if (Model != null && Model.Vehicles != null)
            {  %>                

                <%= Html.Grid(Model.Vehicles)
                        .Columns(column =>
                        {
                            column.For(v => v.UnitNumber).Named("Enhet");
                            column.For(v => Html.CheckBoxFor(v2 => v.Display)).Named("Visa");
                            column.For(v => Html.HiddenFor(v2 => v.UnitNumber)).Attributes(style => "display: none;").HeaderAttributes(style => "display: none;");
                        })
                                .Empty("Hittade inga enheter.")                                
                %>


                <% if (Model.VehiclesHasNoGeoData != null && Model.VehiclesHasNoGeoData.Count > 0)
                   { %>
                       <div class="text" style="display: block; font-size: x-small; font-weight:bold">&nbsp;GPS-positioner saknas för: </div>
                        <% foreach (int radioNumber in Model.VehiclesHasNoGeoData)
                            { %>
                                <div class="text" style="display: list-item; font-size: x-small; color:Red; font-weight:bold">&nbsp;<%: radioNumber%> </div> 
                        <% } %>
                <% } %>


                <% if (Model.VehiclesNotFound != null && Model.VehiclesNotFound.Count > 0)
                   { %>
                        <div class="text" style="display: block; font-size: x-small;"> Följande enheter hade ingen match i databasen: </div>
                        <% foreach (int radioNumber in Model.VehiclesNotFound)
                            { %>
                                <div class="text" style="display: list-item; font-size: x-small;"> <%: radioNumber%> </div> 
                        <% } %>
                <% } %>


                <% if (Model.Vehicles.Count() > 0)
                    { %>
                        <input type="submit" style="margin-top:20px;"  id="Submit_button" value="Visa enheter" />
                <% } %>
        <% } %>
    <% } %>
    </div>

</asp:Content>

函数初始化映射（）
{
var lat=47.496792
var lon=7.571726
变焦值=13
var映射；
/*创建地图*/
//创建一个带有一些默认值的映射，这些默认值将在以后更改
map=新建OpenLayers.map（document.getElementById(
“地图画布”）{
控制：[
新建OpenLayers.Control.Navigation（），
新建OpenLayers.Control.PanZoomBar（），
新建OpenLayers.Control.LayerSwitcher（），
新建OpenLayers.Control.Attribute（），
maxExtent:new OpenLayers.Bounds（-20037508.34，-20037508.3420037508.3420037508.34），
最大分辨率：156543.0399，
numZoomLevels:19，
单位：'m'，
投影：新OpenLayers.projection（“EPSG:900913”），
displayProjection:new OpenLayers.Projection（“EPSG:4326”）
} );            
//定义地图图层
//在这里，我们使用一个预定义的层，该层将随着URL更改而保持最新
layerMapnik=新的OpenLayers.Layer.OSM.Mapnik（“Mapnik”）；
map.addLayer（layerMapnik）；
layerCycleMap=新的OpenLayers.Layer.OSM.CycleMap（“CycleMap”）；
map.addLayer（layerCycleMap）；
layerMarkers=新的OpenLayers.Layer.Markers（“Markers”）；
地图。添加图层（图层标记）；
var lonLat=new OpenLayers.lonLat（lon，lat）.transform（new OpenLayers.Projection（“EPSG:4326”），map.getProjectionObject（）；
地图设置中心（lonLat，zoom）；
var size=新的OpenLayers.size（21,25）；
var偏移=新的OpenLayers.Pixel（-（大小为w/2），-size.h）；
var icon=新的OpenLayers.icon（'http://www.openstreetmap.org/openlayers/img/marker.png，大小，偏移量）；
layerMarkers.addMarker（新的OpenLayers.Marker（lonLat，图标））；
$（'map_canvas'）。可调整大小（）；
}      
$（文档）.ready（函数（）{
初始化映射（）；
});    
卡尔塔
Här kan du se dina fordon。Välj vilka du vill ska visas påkartan。
{
列。For（v=>v.UnitNumber）。命名为（“Enhet”）；
column.For（v=>Html.CheckBoxFor（v2=>v.Display））。命名为（“Visa”）；
column.For（v=>Html.HiddenFor（v2=>v.UnitNumber））.Attributes（style=>“display:none；”）；
})
.Empty（“Hittade inga enheter.”）
%>
0)
{ %>
GPS定位器saknas för：
0)
{ %>
Följande enheter hade ingen match i数据库：
0)
{ %>

---

有人能找到问题并帮我解决吗？

我看到你从

http://www.openstreetmap.org/openlayers/OpenStreetMap.js

这是一些较旧的示例代码片段中的内容，但我认为我说的对，不再推荐这样做

如果您调整添加图层的方式，则无需此功能即可工作。而不是：

        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
        map.addLayer(layerMapnik);
        layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
        map.addLayer(layerCycleMap);

试着去做

        layerOSM = new OpenLayers.Layer.OSM();
        map.addLayer(layerOSM);

您提到您正在看到“跨源资源共享策略拒绝跨源图像加载。”错误。我注意到一些磁贴服务器导致此错误，但通常不是OpenStreetMap中的“标准”地图磁贴。请参阅。它添加了一个层，例如：

    watercolour = new OpenLayers.Layer.OSM("Stamen watercolour",                                                   
            ["http://tile.stamen.com/watercolor/${z}/${x}/${y}.png"],
            {attribution: "&copy; <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> and contributors, under an <a href='http://www.openstreetmap.org/copyright' title='ODbL'>open license</a>. Watercolour style by <a href='http://stamen.com'>Stamen Design</a>",
             "tileOptions": { "crossOriginKeyword": null }}));
    map.addLayer(watercolour);

watercolour=newopenlayers.Layer.OSM（“雄蕊水彩”，
["http://tile.stamen.com/watercolor/${z}/${x}/${y}.png“]，
{署名：“©；和投稿人，采用.watercolor风格，”，
“tileOptions”：{“crossOriginKeyword”：null}}）；
添加图层（水彩画）；

…其中，

“tileOptions”：{“crossOriginKeyword”：null}

是一些OpenLayers魔术，需要它才能工作

---

一般来说，OpenLayers拒绝显示任何内容有很多不同的原因。投影是常见的头痛问题。如果在初始化地图或调用map.setCenter时出错，则什么也看不到。最好创建和构建。但是web地图库更容易开始使用。

您看到任何OpenLayer控件吗或者映射是完全空的？您是否已经尝试调试应用程序以查看它是否尝试获取平铺（图像）？它是完全空的。当我有一个带有相同代码的映射的html文件时，请尝试调试它。

initializeMap（）是否

调用的函数？您的MS服务器是否阻止了任何引用？如何查看是否有任何引用阻止？