Как создать карту с помощью Here maps api и Vue.js - PullRequest
Новая
       50

Как создать карту с помощью Here maps api и Vue.js

0 голосов
/ 02 июня 2018

Я хочу загрузить простую карту с помощью Vue.js.

Я создал компонент с именем map для загрузки базовой карты, но что-то идет не так, и я пробовал много вещей, но ничего не работает со мной.

В моем index.html я помещаю все javascript api из карт Here.

Я пытаюсь использовать этот пример в качестве отправной точки.

Итак, у кого-то есть идея, что яя ошибаюсь?Благодарю.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>

Ответы [ 2 ]

0 голосов
/ 03 июня 2018 
<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>
0 голосов
/ 03 июня 2018

Вы должны указать явный размер контейнера карты.Например: 

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