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

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

我已经尝试过Google Maps，它工作正常，但由于价格和功能而不得不进行切换。现在切换到HERE Maps之后，我似乎找不到在我的站点上包含交互式 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作为高度。

感谢您的帮助。谢谢!

最佳答案

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

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

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

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

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

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>

关于javascript - 如何使用HERE Maps API实现交互式 map 并调整其大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53888293/