Question

我想将OpenStreetMap集成到我的NUXT.js应用程序中。我正在尝试使用this module，但在所有说明之后我都看到一个空白页面。

我已经在github上创建了an issue，但仍然没有答案。

pages\index.vue

<template>
  <div id="map-wrap" style="height: 100%">
    <no-ssr>
      <l-map :zoom=13 :center="[47.413220, -1.219482]">
        <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
        <l-marker :lat-lng="[47.413220, -1.219482]"></l-marker>
      </l-map>
    </no-ssr>
  </div>
</template>

nuxt.config.js

const pkg = require('./package')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }},
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    ['nuxt-leaflet', { /* module options */ }]
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

    }
  }
}

Answer 1

只需更改样式，使其宽度===>

style =“高度：100％；宽度：500像素”

如何将OpenStreetMap添加到我的NUXT应用程序

1 个答案: