ЗДЕСЬ Maps JavaScript API показывает только ЗДЕСЬ логотип, карта пуста

Я пытался внедрить карты ЗДЕСЬ на свой веб-сайт, но столкнулся с проблемой. Когда я монтирую карту, внизу слева отображается только логотип HERE, но область, где должна быть карта, пуста. Я не получаю ошибок. Я также использую Vue.JS, но монтирую карту методом mounted() (см. Код ниже).

`

<template>
    <div class="here-map">
        <div ref="map" id="mapContainer" v-bind:style="{ width: width, height: height }"></div>
    </div>
</template>

<script>
    export default {
        name: "HereMap",
        data() {
            return {
                map: {},
                platform: {}
            }
        },
        props: {
            lat: String,
            lng: String,
            width: String,
            height: String
        },
        created() {
            this.platform = new H.service.Platform({
                apikey: "myApiKey"
            });
        },
        mounted() {
            const maptypes = this.platform.createDefaultLayers();
            this.map = new H.Map(
                document.getElementById('mapContainer'),
                maptypes.vector.normal.map,
                {
                    center: {lat:50, lng:5},
                    zoom: 4,
                    pixelRatio: window.devicePixelRatio || 1
                });
        }
    }
</script>

`

Карта выглядит так:
выглядит как .


here-api
person Timotej Avsec    schedule 06.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Пожалуйста, укажите свой JS apikey в файле src / App.vue, а не в src / components / HereMap.vue (как в приведенном выше коде), пожалуйста, внесите изменения, как показано ниже, и отметьте -

src / components / HereMap.vue

<script>
export default {
    name: "HereMap",
    data() {
        return{
            map:{},
            platform:{}
        }
     },
    props: { 
        apikey:String,
        lat:String,
        lng:String,
        width:String,
        height:String
    },
  created() {
    this.platform = new H.service.Platform({
        "apikey":this.apikey
        });
    },
   mounted() {
this.map = new H.Map(
    this.$refs.map,
    this.platform.createDefaultLayers().normal.map,
    {
        zoom: 10,
        center: { lng: this.lng, lat: this.lat }
    }
);
  }
}
</script>

src / App.vue

<template>
    <div id="app">
        <HereMap
            apikey="Your JS Api key"
            lat="37.7397"
            lng="-121.4252"
            width="100%"
            height="835px" />
    </div>
</template>

<script>
    import HereMap from "./components/HereMap.vue"

    export default {
        name: 'app',
        components: {
            HereMap
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
</style>

для получения более подробной информации, пожалуйста, проверьте- https://developer.here.com/blog/showing-a-here-map-with-the-vue.js-javascript-framework

person HERE Developer Support    schedule 07.04.2020