Question

在初始化here-map api以便在vue组件中渲染地图时，出现以下错误：

“'H'未定义
src / components / HelloWorld.vue：15：26 const platform = new H.service.Platform（{...}）“

我已根据需要在at中将index-html此处的地图的标题包含在内而我的组件代码是：

  <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在用户界面上显示地图。我想念什么？

Answer 1

Vue组件无权访问全局范围，这就是为什么它会给出错误-构建系统假定从未定义变量。有几种方法可以达到期望的结果，这取决于应用程序体系结构。

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

代码很可能看起来像这样： Vue.prototype。$ H = self.H //添加到main.js

该组件调用“ H”命名空间，必须将其更改为“ this。$ H”

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

使用vue-nodejs

1 个答案: