如何在html头部编写正确的javascript源代码？浏览器总是无法加载资源_Javascript_Html_Maps_Here Api

如何在html头部编写正确的javascript源代码？浏览器总是无法加载资源

javascript html maps here-api

如何在html头部编写正确的javascript源代码？浏览器总是无法加载资源,javascript,html,maps,here-api,Javascript,Html,Maps,Here Api,我只想创建一个默认网站，显示一个类似于此演示的地图。HTML和JavaScript代码已经提供了，所以我只需要将它们放在一起就可以了，但是看起来好像有错误不幸的是，我的代码在每个浏览器中都会失败，因为HTML头中指向脚本资源的某些链接后面没有内容： ../template.css ../test-credentials.js ../js示例渲染帮助程序/iframe-height.js 这对我来说似乎很明显，但不知何故，JSFIDLE可以毫无问题地读取此文件，而且我非常确定HEREMaps

我只想创建一个默认网站，显示一个类似于此演示的地图。HTML和JavaScript代码已经提供了，所以我只需要将它们放在一起就可以了，但是看起来好像有错误

不幸的是，我的代码在每个浏览器中都会失败，因为HTML头中指向脚本资源的某些链接后面没有内容：

../template.css
../test-credentials.js
../js示例渲染帮助程序/iframe-height.js

这对我来说似乎很明显，但不知何故，JSFIDLE可以毫无问题地读取此文件，而且我非常确定HEREMaps没有提供错误的代码，因此我想知道我的代码有什么问题

出于安全原因，我不打算编写凭据，因此如果您尝试，必须更换

window.apikey

提前谢谢

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">

    <title>Map at a specified location</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script> 
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script> 
  </head>

  <body id="markers-on-the-map">
    <script type="text/javascript" src='demo.js'> 

    /**
     * Moves the map to display over Berlin
     *
     * @param  {H.Map} map      A HERE Map instance within the application
     */

    function moveMapToBerlin(map){
      map.setCenter({lat:52.5159, lng:13.3777});
      map.setZoom(14);
    }

    /**
     * Boilerplate map initialization code starts below:
     */

    //Step 1: initialize communication with the platform
    // In your own code, replace variable window.apikey with your own apikey
    var platform = new H.service.Platform({
      apikey: window.apikey
    });
    var defaultLayers = platform.createDefaultLayers();

    //Step 2: initialize a map - this map is centered over Europe
    var map = new H.Map(document.getElementById('map'),
      defaultLayers.vector.normal.map,{
      center: {lat:50, lng:5},
      zoom: 4,
      pixelRatio: window.devicePixelRatio || 1
    });
    // add a resize listener to make sure that the map occupies the whole container
    window.addEventListener('resize', () => map.getViewPort().resize());

    //Step 3: make the map interactive
    // MapEvents enables the event system
    // Behavior implements default interactions for pan/zoom (also on mobile touch environments)
    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

    // Create the default UI components
    var ui = H.ui.UI.createDefault(map, defaultLayers);

    // Now use the map as required...
    window.onload = function () {
      moveMapToBerlin(map);
    }  

    </script>
  </body>
</html>


在指定位置映射
/**
*将地图移动到柏林上空显示
*
*@param{H.Map}在应用程序中映射一个HERE映射实例
*/
函数moveMapToBerlin（映射）{
地图设置中心（{lat:52.5159，lng:13.3777}）；
map.setZoom（14）；
}
/**
*样板图初始化代码从下面开始：
*/
//步骤1：初始化与平台的通信
//在您自己的代码中，将变量window.apikey替换为您自己的apikey
var平台=新的H.service.platform({
apikey:window.apikey
});
var defaultLayers=platform.createDefaultLayers（）；
//步骤2：初始化地图-此地图以欧洲为中心
var map=new H.map（document.getElementById（'map'），
defaultLayers.vector.normal.map{
中心：{lat:50，lng:5}，
缩放：4，
pixelRatio:window.devicePixelRatio | | 1
});
//添加一个调整大小的侦听器，以确保贴图占据整个容器
addEventListener（'resize'，（）=>map.getViewPort（）.resize（））；
//步骤3：使地图具有交互性
//MapEvents启用事件系统
//行为实现了平移/缩放的默认交互（也在移动触摸环境中）
var behavior=newh.mapevents.behavior（newh.mapevents.mapevents（map））；
//创建默认的UI组件
var ui=H.ui.ui.createDefault（映射，默认层）；
//现在根据需要使用地图。。。
window.onload=函数（）{
moveMapToBerlin（地图）；
}

遵循您提供的链接。我已经建立了一个工作示例：

//HEREMaps-演示API密钥。你应该改变这个。
变量apikey='H6XyiCT0w1t9GgTjqhRXxDMrVj9h78ya3NuxlwM7XUs'；
/**
*将地图移动到柏林上空显示
*
*@param{H.Map}在应用程序中映射一个HERE映射实例
*/
函数moveMapToBerlin（映射）{
地图设置中心({
拉脱维亚：52.5159，
液化天然气：13.3777
});
map.setZoom（14）；
}
/**
*样板图初始化代码从下面开始：
*/
//步骤1：初始化与平台的通信
//在您自己的代码中，将变量window.apikey替换为您自己的apikey
var平台=新的H.service.platform({
apikey:apikey
});
var defaultLayers=platform.createDefaultLayers（）；
//步骤2：初始化地图-此地图以欧洲为中心
var map=new H.map（document.getElementById（'map'），
defaultLayers.vector.normal.map{
中心：{
拉丁美洲：50，
液化天然气：5
},
缩放：4，
pixelRatio:window.devicePixelRatio | | 1
});
//添加一个调整大小的侦听器，以确保贴图占据整个容器
addEventListener（'resize'，（）=>map.getViewPort（）.resize（））；
//步骤3：使地图具有交互性
//MapEvents启用事件系统
//行为实现了平移/缩放的默认交互（也在移动触摸环境中）
var behavior=newh.mapevents.behavior（newh.mapevents.mapevents（map））；
//创建默认的UI组件
var ui=H.ui.ui.createDefault（映射，默认层）；
//现在根据需要使用地图。。。
window.onload=函数（）{
moveMapToBerlin（地图）；
}

#地图{
宽度：95%；
高度：450px；
背景：灰色；
}
#面板{
宽度：100%；
高度：400px；
}

谢谢你这么快就帮了我！你知道吗，为什么这里发布的代码包含这么多指向skcript源代码的未知链接？为什么在css中描述一个面板，尽管它没有在html中定义？