Fatal编程技术网
  • javascript/
  • Javascript 诺基亚HERE和Metro UI CSS 2.0-显示空白而不是地图

Javascript 诺基亚HERE和Metro UI CSS 2.0-显示空白而不是地图

javascript jquery asp.net-mvc here-api

Javascript 诺基亚HERE和Metro UI CSS 2.0-显示空白而不是地图,javascript,jquery,asp.net-mvc,here-api,metro-ui-css,Javascript,Jquery,Asp.net Mvc,Here Api,Metro Ui Css,我正在使用Metro UI框架创建一个简单的web应用程序，我想在其中显示一个地图 我已经决定使用Nokia HERE maps及其javascript API，但即使我遵循这个示例，我也只得到一个带有HERE徽标的白色div。唯一可以正确显示地图的浏览器是Chrome 我发现问题一定出在地图和metro-bootstrap.css之间的兼容性上，因为当我删除它时，地图显示正确。我使用ASP.NET MVC进行母版页渲染 有人知道如何解决这个问题吗 这是我的HTML代码 <!DOCTYPE

我正在使用Metro UI框架创建一个简单的web应用程序，我想在其中显示一个地图

我已经决定使用Nokia HERE maps及其javascript API，但即使我遵循这个示例，我也只得到一个带有HERE徽标的白色div。唯一可以正确显示地图的浏览器是Chrome

我发现问题一定出在地图和metro-bootstrap.css之间的兼容性上，因为当我删除它时，地图显示正确。我使用ASP.NET MVC进行母版页渲染

有人知道如何解决这个问题吗

这是我的HTML代码

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>        
    <script src="/js/jquery-2.1.0.min.js"></script>
    <script src="/js/jquery-ui-1.10.4.min.js"></script>        
    <script src="http://js.api.here.com/se/2.5.4/jsl.js?with=all" type="text/javascript" charset="utf-8"></script>
    <script src="/js/metro.min.js"></script>
    <link href="/css/metro-bootstrap.css" rel="stylesheet" />
    <link href="/css/metro-bootstrap-responsive.css" rel="stylesheet" />
    <link href="/css/iconFont.min.css" rel="stylesheet" />            
    <link href="/css/customStyling.css" rel="stylesheet" />      
    <script src="/js/maps.js"></script>      
</head>
<body class ="metro">
    <div class="container">
        <h1 class="fg-white"><span class="icon-cloudy on-left fg-white"></span>TEVI</h1>
        <br />

<script src="/js/metro/metro-tile-transform.js"></script>
<script src="/js/user-interaction.js"></script>
<div id="tilesArea">
            <div id="0" class="tile live double bg-lightBlue " data-role="live-tile" data-effect="slideUpDown" data-click="transform" data-period="3581" onclick="showDetails(this)">
                <div class="tile-content text-left fg-white subheader text-left">
                    <div class="padding10"><span class="icon-thermometer on-left"></span>-10 °C</div>
                </div>
                <div class="tile-content text-left fg-white subheader text-left">
                    <div class="padding10"><span class="icon-rainy-2 on-left"></span>200 mm</div>
                </div>
                <div class="tile-status padding10">
                    <span class="name">Cidlo 1</span>
                </div>
            </div>
        .
        .
        .
</div>
<hr />

<div id="detailsArea">
    <p>
        ...
    </p>
</div>
<hr />        
    </div>
    <div id="mainMapArea"></div>


<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"728fd54a207c4b32a11a57ed0a099b2b"}
</script>
<script type="text/javascript" src="http://localhost:49764/654ba5e681db49c6b825ad5f35203c7d/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>
欢迎提出任何建议。谢谢

我忘了添加结果的屏幕截图。可以在这里找到： 
function showStartupMap() {
    nokia.Settings.set("app_id", "my app id");
    nokia.Settings.set("app_code", "my app code");
    nokia.Settings.set("serviceMode", "cit");
    var map = new nokia.maps.map.Display(
            document.getElementById("mainMapArea"), {
                // Zoom level for the map
                zoomLevel: 10,
                // Map center coordinates
                center: [52.51, 13.4]
            }
        );
}

$(document).ready(function () {
    showStartupMap();
})