Question

我正在尝试使用openstreetmap而不是谷歌地图，但没有地图可见。当我使用html网站测试几乎相同的代码时，它可以工作，但不能在我的mvc2应用程序中。 WHY ???

<%@ 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>

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

Answer 1

我看到你正在从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的“标准”地图图块。见this example which adds several different tile sources。它添加了一个这样的层：

    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);

...其中"tileOptions": { "crossOriginKeyword": null }是使其成功运行所需的一些OpenLayers魔法。

一般来说，OpenLayers拒绝展示任何内容的原因很多。预测通常是令人头痛的问题。如果在初始化地图或调用map.setCenter时出错，那么你什么都看不到。最好start simple并积累。但是LeafletJS Web地图库更容易上手。

没有openstreetmap可见，为什么？

1 个答案: