时间戳

首页 > 解决方案 > 使用 vue-nodejs 映射应用程序

node.js - 使用 vue-nodejs 映射应用程序

问题描述

在初始化 here-map api 以在 vue 组件中呈现地图时，我收到以下错误：

“'H' 未定义
src/components/HelloWorld.vue:15:26 const platform = new H.service.Platform({...})”

我根据需要在 index.html 中包含了 here-maps 的标头，我 的组件代码是：

  <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: 'nEpmlsRnNdUOVqzCSjdM',
      app_code: 'pDktey4pqzO2OlZusMCQPA',
      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>

编辑：这是我的 index.html 代码，用于包含 api 调用

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1533195059" />
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

</head>

我正在尝试使用提供的 api 在我的用户界面上显示地图。我错过了什么？

标签： node.jsexpressvue.jshere-api

解决方案

Vue 组件无权访问全局范围，这就是它给出错误的原因——构建系统假定该变量从未定义过。有几种方法可以达到预期的效果，这取决于应用程序架构。

可以使用实例属性从 Vue 组件中提供对全局变量的访问（https://vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example）

代码很可能是这样的： Vue.prototype.$H = self.H // 添加到 main.js

并且组件调用的“H”命名空间必须更改为“this.$H”</p>

或者，可以使用 Vue.mixins，编写插件，甚至通过直接调用 self.H 来访问全局变量（不推荐）也就是说，提供命名空间或实例化映射的特定方式和方式必须由应用程序开发人员。希望这可以帮助。

推荐阅读