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

Question

我正在建立一个网站作为一个小项目，我想通过 HERE Maps 添加一个交互式地图，占据我的导航栏下的所有可用屏幕 space。如何包含来自 HERE 地图的交互式地图？

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

<!-- 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 添加您的样式 sheet。我只是在减去 header 高度 .

之后应用 100vh 视口高度

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

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

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

我还更新了下面代码段中提到的所有更改。试试这个我希望它能帮助你。谢谢

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

<!-- 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 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(map);
      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>

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

How to implement interactive Map with HERE Maps API and resize it?

javascript

css

api

maps

resize