使用vue-nodejs映射应用程序 [英] Map application using vue-nodejs
问题描述
在初始化here-map api以便在vue组件中渲染地图时，出现以下错误:
While initializing the here-map api in order to render the map in a vue component I am getting the following error:
'H'未定义
src/components/HelloWorld.vue:15:26
const platform = new H.service.Platform({...})"
"'H' is not defined
src/components/HelloWorld.vue:15:26
const platform = new H.service.Platform({...})"
I have included the headers for here-maps in index.html as required at and my component code is:
<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调用
here is my index.html code for including api calls
<!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在我的用户界面上显示地图. 我想念什么?
I am trying to display the map on my user interface using the provided api. What am I missing?
推荐答案
Vue组件无法访问全局范围，这就是为什么它会产生错误–构建系统假定从未定义变量. 有几种方法可以达到期望的结果，这取决于应用程序体系结构.
The Vue component does not have access to the global scope, that’s why it gives an error – the build system assumes that the variable was never defined. There are several ways to achieve the desired result and it depends on the application architechture.
一个人可以使用实例属性从Vue组件中访问全局变量( https://vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example )
One can use instance properties to provide access to the global variable from within a Vue component (https://vuejs.org/v2/cookbook/adding-instance-properties.html#Base-Example)
代码很可能看起来像这样: Vue.prototype.$ H = self.H//添加到main.js
The code, most likely will look like that: Vue.prototype.$H = self.H // Added to the main.js
该组件调用"H"命名空间，必须将其更改为"this.$ H"
And the component calls tot he „H" namesapce must be changed to „this.$H"
或者，可以使用Vue.mixins，编写插件，甚至可以通过直接调用self.H来访问全局变量(不推荐) 也就是说，在哪里以及如何提供名称空间或实例化地图的特定方式必须由应用程序开发人员决定. 希望这会有所帮助.
Alternatively one can use Vue.mixins, write a plugin or even access the global variable through the direct call to self.H (not recommended) Saying that, the particular way where and how provide the namespace or instantiate the map must be decided by the application developer. Hope this helps.
这篇关于使用vue-nodejs映射应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
