1

我正在使用 Metro UI 框架 ( http://metroui.org.ua/ ) 创建一个简单的 Web 应用程序，我想在其中显示地图。

我已决定使用诺基亚 HERE 地图及其 javascript API，但即使我按照此示例https://developer.here.com/javascript-apis/documentation/maps/topics/quick-start.html我得到的只是一个带有 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>

这是 javascript 文件 maps.js，其中包含显示地图的功能： 

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

欢迎任何建议。谢谢

4

0 回答 0