时间戳

首页 > 解决方案 > HERE Maps JavaScript API 仅显示 HERE 徽标，地图为空

here-api - HERE Maps JavaScript API 仅显示 HERE 徽标，地图为空

问题描述

我试图在我的网站上实现 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>

`

这就是“地图”的样子
好像：

标签： here-api

解决方案

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

推荐阅读