如何使用Here maps和Vue.js创建地图
如何使用Here maps和Vue.js创建地图
提问于 2018-06-03 03:37:34
我想使用Vue.js加载一个简单的地图。
我创建了一个名为map的组件来加载基本地图，但有些东西出错了，我尝试了很多方法，但都不起作用。
在我的index.html上，我把所有的javascript api都放在了这里的地图上。
我正在尝试使用这个样本作为起点。
有没有人知道我说错了什么？谢谢。https://developer.here.com/documentation/maps/topics/quick-start.html
<template>
<div>
<div id="mapContainer">
</div>
</div>
</template>
<script>
export default {
name: 'maps',
data: function() {
return {
map: null,
maptypes: null
}
},
mounted () {
this.initMap ();
},
methods: {
initMap() {
// Initialize the platform object:
var platform = new H.service.Platform({
app_id: 'nyKybJs4fZYfMCd7jfsx',
app_code: 'E_xE5837hGk33SL8M6hWIg',
useCIT: true,
useHTTPS: true
});
this.maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
this.map = new H.Map(
document.getElementById('mapContainer'),
this.maptypes.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
});
}
}
}
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-03 08:12:48
<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: 'nyKybJs4fZYfMCd7jfsx',
app_code: 'E_xE5837hGk33SL8M6hWIg',
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>Stack Overflow用户
发布于 2018-06-03 08:01:02
您应该提供映射容器的显式大小。例如：
<template>
<div>
<div style="width: 100%; height: 500px" id="mapContainer"></div>
</div>
</template>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50660493
复制相关文章
相似问题
腾讯云开发者
