Question

我正在将网站设置为一个小项目，我想通过HERE Maps添加一个交互式地图，该地图占用了我的导航栏下的所有可用屏幕空间。如何在HERE地图中包含交互式地图？

我已经尝试过Google Maps，它工作正常，但由于价格和功能而不得不进行切换。现在切换到HERE Maps之后，我似乎找不到在我的站点上包含交互式地图的方法，而我总是得到一个静态的地图。观看了一些可以解决我的问题的教程，但是它们的代码对我不起作用。另外，我一直想让地图适合整个导航栏下方的整个屏幕，我使用了与地图相同的代码来适合整个屏幕，但是它也不起作用。

<!-- HERE Maps performance optimiiization for mobile-->
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<!-- HERE Maps API Code Libaries-->
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display|Roboto|Source+Sans+Pro" rel="stylesheet">

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Site info-->
<title>opX</title>

<!-- CSS -->
<link rel="stylesheet" href="stylesheet.css" type="text/css">

<div class="navbar-fixed navbfx">
    <nav class="navbfx">
        <navOne>
            <div class="nav-wrapper" style="background-color: #313131;">

                <ul class="left hide-on-med-and-down" id="topNav">
                    <li class="waves-effect waves-light"><a href="index.html" style="color: #c1cbc1">Search</a></li>
                    <li class="waves-effect waves-light"><a href="" style="color: #c1cbc1">Chat</a></li>
                    <li class="waves-effect waves-light"><a href="" style="color: #c1cbc1">YouTube</a></li>
                    <li class="waves-effect waves-light"><a href="" style="color: #c1cbc1">Mail</a></li>
                    <li class="active waves-effect waves-light"><a href="here_maps.html"><b>Maps</b></a></li>
                    <li class="waves-effect waves-light"><a href="" style="color: #c1cbc1">Cloud</a></li>
                </ul>

                <ul class="right hide-on-med-and-down" id="topNav">
                    <li class="waves-effect waves light"><a href="" style="color: #c1cbc1">Sign in</a></li>
                    <li><i class="material-icons">settings</i></li>
                </ul>

            </div>
        </navOne>
    </nav>
</div>

<main>
    <!-- had to specify the size in pixel cause I coudlnt find a way to do relative -->
    <div style="width: 100%; height: 939px" id="mapContainer"></div>
    <script>
        // Initialize the platform object - app_ID and app_Code are included - I just removed for this post
        var platform = new H.service.Platform({
            'app_id': '{removed}',          /* API INFO HERE*/
            'app_code': '{removed}'
        });

        // Obtain the default map types from the platform object
        var maptypes = platform.createDefaultLayers();

        // Instantiate (and display) a map object
        var map = new H.Map(
            document.getElementById('mapContainer'),
            maptypes.normal.map, {
                zoom: 10,
                center: {
                    lat: 52.5,
                    lng: 13.4
                }
            });

        var mapEvents = new H.mapevents.MapEvents(mapContainer);

        var behavior = new H.mapevents.Behavior(mapEvents);

    </script>

</main>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

地图应该是交互式的，但它是静态的。另外，它不适合屏幕的其余部分，因此我不得不使用px作为高度。

我们非常感谢您的帮助。谢谢！

Answer 1

H.mapevents.MapEvents期望您刚刚初始化的地图变量对象：

var mapEvents = new H.mapevents.MapEvents(map);

使地图全屏显示的最简单方法是赋予导航栏绝对位置：

<div class="navbar-fixed navbfx" style="position: absolute;">

并将mapContainer的高度设为100%：

<div style="width: 100%; height: 100%" id="mapContainer"></div>

Answer 2

步骤1-从mapContainer元素中删除内联样式。

<div id="mapContainer"></div>

第2步-在样式表中的CSS下面添加。我只是在减去100vh高度之后应用header视口高度。

#mapContainer {
   height: calc(100vh - 64px);
   width: 100%;
}

步骤3-您在mapContainer方法中传递了错误的H.mapevents.MapEvents参数。您应该以{{1}}方法传递map 。

H.mapevents.MapEvents

我还更新了以下代码段中所有提到的更改。试试这个，希望对您有所帮助。谢谢

var mapEvents = new H.mapevents.MapEvents(map);

#mapContainer {
  height: calc(100vh - 64px);
  width: 100%;
}

如何使用HERE Maps API实现交互式地图并调整其大小？

2 个答案: