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为空）

1 个答案: