Javascript Vue传单未渲染贴图

我有以下代码（如下），到目前为止，我看到的是白色页面，控制台上没有任何错误。我想用标记渲染地图。 我是Vue的初学者，也许你可以帮我。我关注了一些关于传单的页面，类似的代码也起了作用

App.vue

<template>
  <div id="app"></div>
</template>

<script>
import Map from './components/Map.vue'

export default {
  name: 'app',
  components: {
    Map
  }
}
</script>

<template>
    <div id="map">
        <v-map :zoom="zoom" :center="center">
            <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
            <v-marker :lat-lng="marker"></v-marker>
            <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng" @l-add="$event.target.openPopup()">
                <v-popup :content="item.content"></v-popup>
            </v-marker>
        </v-map>
    </div>
</template>

<script>
import Vue2Leaflet from 'vue2-leaflet';
import L from 'leaflet';  

  export default {
    name: 'map',
    components: {
        'v-map': Vue2Leaflet.Map,
        'v-tilelayer' :Vue2Leaflet.TileLayer,
        'v-marker': Vue2Leaflet.Marker,
        L
    },
    data() {
        return {
            zoom: 13,
            center: [47.413220, -1.219482],
            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            marker: L.latLng(47.413220, -1.219482),

            markers: [
                {
                    id: 1,
                    latlng: L.latLng(47.417220, -1.222482),
                    content: 'Hi! this is my popup data'
                },
                {
                    id: 2,
                    latlng: L.latLng(47.417220, -1.25),
                    content: 'Another'
                }
            ]
        }
    }
  }
</script>


<style scoped>
@import "~leaflet/dist/leaflet.css";

</style>

谢谢你的帮助

可能在代码中

<v-map :zoom="zoom" :center="center">

成功

<v-map :zoom="zoom" :center="center" style="height: 850px; width: 500px">

可能在代码中

<v-map :zoom="zoom" :center="center">

成功

<v-map :zoom="zoom" :center="center" style="height: 850px; width: 500px">

---

您需要在main.js文件中添加以下内容：

import { Icon } from 'leaflet'
import 'leaflet/dist/leaflet.css'

delete Icon.Default.prototype._getIconUrl;

Icon.Default.imagePath = '.';
Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

---

您需要在main.js文件中添加以下内容：

import { Icon } from 'leaflet'
import 'leaflet/dist/leaflet.css'

delete Icon.Default.prototype._getIconUrl;

Icon.Default.imagePath = '.';
Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

---

问题是您没有为贴图组件指定高度

以下是固定代码：

 <v-map :zoom="zoom" :center="center" style="height: 700px; width:600px">
        <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
        <v-marker :lat-lng="marker"></v-marker>
        <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng" @l-add="$event.target.openPopup()">
            <v-popup :content="item.content"></v-popup>
        </v-marker>
    </v-map>

---

问题在于您没有为地图组件指定高度

以下是固定代码：

 <v-map :zoom="zoom" :center="center" style="height: 700px; width:600px">
        <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
        <v-marker :lat-lng="marker"></v-marker>
        <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng" @l-add="$event.target.openPopup()">
            <v-popup :content="item.content"></v-popup>
        </v-marker>
    </v-map>

您是否检查过dom中是否有任何内容？可以渲染贴图，但不渲染高度/宽度set@S我怎样才能检查它？在网络浏览器的控制台中，我看不到任何东西。在控制台中看不到。如果打开inspector（f12），然后单击elements选项卡，然后可以单击html中的方式。在inspector中查看映射容器是否为0x0。是否找到了原因/修复方法？是否检查了dom中是否有任何内容？可以渲染贴图，但不渲染高度/宽度set@S我怎样才能检查它？在网络浏览器的控制台中，我看不到任何东西。在控制台中看不到。如果打开inspector（f12），然后单击elements选项卡，然后可以单击html中的方式。在inspector中查看地图容器是否为0x0。找到原因/修复方法了吗？我需要设置高度我需要设置高度