如何使用Here maps api和Vue.js创建地图

我想使用Vue.js加载一个简单的地图

我创建了一个名为map的组件来加载基本映射，但有些地方出了问题，我尝试了很多方法，但没有任何效果

在我的index.html上，我把这里的所有javascript api都放在地图上

我试图用这个例子作为起点

有人知道我做错了什么吗？ 谢谢

导出默认值{
名称：'地图'，
数据：函数（）{
返回{
map:null，
映射类型：null
} 
},
挂载（）{
this.initMap（）；
},
方法：{
initMap（）{
//初始化平台对象：
var平台=新的H.service.platform({
应用程序id:'nyKybJs4fZYfMCd7jfsx'，
应用程序代码：“E_xE5837hGk33SL8M6hWIg”，
乌塞西特：没错，
对
});
this.maptypes=platform.createDefaultLayers（）；
//实例化（并显示）地图对象：
this.map=新的H.map(
document.getElementById（'mapContainer'），
此.maptypes.normal.map，
{
缩放：10，
中心：{lng:13.4，lat:52.51}
});
}
}
}

您应该提供地图容器的明确大小。例如：

<template>
    <div>
        <div style="width: 100%; height: 500px" id="mapContainer"></div>
    </div>
</template>

导出默认值{
名称：“HelloWorld”，
数据：（）=>（{map:null}），
挂载（）{
//初始化平台对象：
const platform=新的H.service.platform({
应用程序id:'nyKybJs4fZYfMCd7jfsx'，
应用程序代码：“E_xE5837hGk33SL8M6hWIg”，
乌塞西特：没错，
是的，
});
const maptypes=platform.createDefaultLayers（）；
//实例化（并显示）地图对象：
this.map=新的H.map(
这个.el.getElementById（'map-container'），
maptypes.normal.map，
{
缩放：10，
中心：{lng:13.4，lat:52.51}，
},
);
},
}

他们没有npm软件包。确实要使用此选项吗？它适用于Yandex和Google mapsHERE地图，在内部以100%的高度和宽度渲染。因此，它们应该在应用程序的父节点中提供。这是谢谢。Lol有效。我只是把这个.$el改成这个。$el.querySelector（“#mapContainer”）来选择我的地图。

这个。$el.getElementById（'mapContainer'）

是最快的方法

<template>
    <div>
        <div style="width: 100%; height: 500px" id="mapContainer"></div>
    </div>
</template>

<template>
  <div>
    <div style="width: 100%; height: 500px" id="map-container"></div>
  </div>
</template>

<script>
export default {    
  name: 'HelloWorld',

  data: () => ({ map: null }),

  mounted () { 
    // Initialize the platform object:
    const platform = new H.service.Platform({
      app_id: 'nyKybJs4fZYfMCd7jfsx',
      app_code: 'E_xE5837hGk33SL8M6hWIg',
      useCIT: true,
      useHTTPS: true,
    });

    const maptypes = platform.createDefaultLayers();

    // Instantiate (and display) a map object:
    this.map = new H.Map(
      this.$el.getElementById('map-container'),
      maptypes.normal.map,
      {
        zoom: 10,
        center: { lng: 13.4, lat: 52.51 },
      },
    );
  },
}
</script>