Question

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

App.vue

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

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

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

Map.vue

<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>

main.js

import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate'
import router from './router'
import Vue2Leaflet from 'vue2-leaflet';
import L from 'leaflet';

Vue.use(VeeValidate)
Vue.use(Vue2Leaflet)
Vue.use(L);
Vue.config.productionTip = false

new Vue({
  router,
  Vue2Leaflet,
  L,
  render: h => h(App)
}).$mount('#app')

感谢帮助！

Answer 1

可能在代码中

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

添加属性

style="height: 850px; width: 500px"

成功

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

Answer 2

您需要在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')
});

Answer 3

问题是您没有给地图组件指定高度。

这是固定代码：

 <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>

Vue传单未呈现地图

3 个答案: