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

Question

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

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

在我的 index.html 上，我把所有 javascript api 来自这里的地图。

我尝试使用此示例作为起点。

那么，有人知道我做错了什么吗？谢谢。 https://developer.here.com/documentation/maps/topics/quick-start.html

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

</div>
</template>

<script>

export default {    
  name: 'maps',
  data: function() {
      return {
        map: null,
        maptypes: null
      } 
  },
  mounted () { 
    this.initMap ();
   },
  methods: { 
    initMap() {

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

        this.maptypes = platform.createDefaultLayers();

        // Instantiate (and display) a map object:
        this.map = new H.Map(
        document.getElementById('mapContainer'),
        this.maptypes.normal.map,
        {
        zoom: 10,
        center: { lng: 13.4, lat: 52.51 }
        });

        }
}

}
</script>

Answer 1

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

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

Answer 2

<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>

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

How to create a map using Here maps api and Vue.js

here-api

vue.js

vue-component

vuejs2