[英]Vue Leaflet not rendering map
我有以下代碼(如下),到目前為止我能看到的是白頁,控制台上沒有任何錯誤。 我想用標記渲染地圖。 我是 Vue 的初學者,也許你可以幫助我。 我已經關注了一些關於傳單的頁面,類似的代碼也有效。
應用程序
<template>
<div id="app"></div>
</template>
<script>
import Map from './components/Map.vue'
export default {
name: 'app',
components: {
Map
}
}
</script>
地圖.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: '© <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>
主文件
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')
感謝幫助!
可能在代碼中
<v-map :zoom="zoom" :center="center">
添加屬性
style="height: 850px; width: 500px"
成功
<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')
});
問題是您沒有為地圖組件提供高度。
這是固定代碼:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.