HERE Maps JS API仅显示HERE徽标，地图为空

Question

我正在尝试将HERE映射实现到我的网站，但是遇到了问题。在安装地图时，仅显示了左下角的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>

这就是“地图” looks like的方式。

Answer 1

[请在src / App.vue文件中指定您的JS api密钥，而不是在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