javascript - 如何使用 HERE Maps API 实现交互式 map 并调整其大小？

Question

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

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

<!-- 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>

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

感谢您的每一次帮助。谢谢!

Answer 1

H.mapevents.MapEvents 需要您刚刚初始化的 map 变量对象:

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

全屏显示 map 的最简单解决方案是为导航栏提供绝对定位:

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

并将 mapContainer 的高度设置为 100%:

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