HERE API 不会加载地图 - H.Map（参数 #0 为空）

Question

我正在按照 HERE Maps API Quick Start Guide 在我的网站上实施地图。使用本指南中的确切代码时，我在浏览器中收到以下错误 (Chrome)：

message: "H.Map (Argument #0 null)"stack: "Error↵    at new C (https://js.api.here.com/v3/3.1/mapsjs-core.js:35:1007)↵    at new Q (https://js.api.here.com/v3/3.1/mapsjs-core.js:340:639)↵

HTML（仅关键部分）

<head>    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
</head>

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

JavaScript

var platform = new H.service.Platform({
  'apikey': 'uHrZJBCC_k98EXtICkx_7GH_QyFRSkAC1xoh7Rd02Pk'
});

var defaultLayers = platform.createDefaultLayers();

var map = new H.Map(
  document.getElementById('mapContainer'),
  defaultLayers.vector.normal.map,
  {
    zoom: 10,
    center: { lat: 52.5, lng: 13.4 }
  });

Answer 1

当使用加载一些外部资源的第三方库时，请确保协议保持不变以避免混合内容错误，并仔细检查您的 Content-Security-Policy。

通过以问题描述中的示例为例，我能够准备一个功能齐全的 demo on JsBin。

function loadMap() {
  var platform = new H.service.Platform({
  'apikey': 'uHrZJBCC_k98EXtICkx_7GH_QyFRSkAC1xoh7Rd02Pk'
  });

  var defaultLayers = platform.createDefaultLayers();

  var map = new H.Map(
    document.getElementById('mapContainer'),
    defaultLayers.vector.normal.map,
    {
      zoom: 10,
      center: { lat: 52.5, lng: 13.4 }
    });
}

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is ready');
  loadMap();
});

#mapContainer {
  width: 640px;
  height: 350px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
  <div id="mapContainer"></div>
</body>
</html>

HERE API 不会加载地图 - H.Map（参数 #0 为空）

HERE API won't load map - H.Map (Argument #0 null)

javascript

here-api