使用VueJS的OpenLayers-用空div代替map

Question

我正试图在Vue应用程序中实现一个简单的世界地图。我创建了一个MapContainer组件，然后将其导入到我的主应用程序中。以下是MapContainer.vue的代码：

<template>
<div
ref="map-root"
style="width: 100%, height: 100%">
</div>
</template>
<script>
import View from 'ol/View';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import 'ol/ol.css';
export default {
name: 'MapContainer',
components: {},
props: {},
mounted() {
new Map({
target: this.$refs['map-root'],
layers: [
new TileLayer({
source: new OSM()
})
],

view: new View({
zoom: 0,
center: [0, 0],
constrainResolution: true
})
});
}
}
</script>
<style>
</style>

我正在注册MapContainer组件，然后简单地将其放置在父组件的div中。当我导入这个组件并尝试使用它时，我会得到一个空的div来代替映射。有人知道我做错了什么吗？

这是父组件的代码：

<template>
<div>
<map-container></map-container>
</div>
</template>
<script>
import MapContainer from '../mapping/MapContainter.vue';

export default {
components: {
'map-container': MapContainer
}
}
</script>

Answer 1

我通过在div中添加以下类并使用ref:来解决这个问题

.map {
width: 100% !important;
height: 600px !important;
}

(重要的可能不是绝对必要的(。