如何解决如何在 NuxtJS 上正确显示传单地图
我正在使用 NuxtJS 并使用库 https://vue2-leaflet.netlify.app,但地图无法正确显示。这是我的代码和结果屏幕:
map.vue :
<template>
<div id="map-wrap" style="height: 100vh">
<no-ssr>
<l-map :zoom="13" :center="[55.9464418,8.1277591]">
<l-tile-layer
url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
></l-tile-layer>
<l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
</l-map>
</no-ssr>
</div>
</template>
nuxt-leaflet.js :
import Vue from 'vue';
import { LMap,LTileLayer,LMarker } from 'vue2-leaflet';
Vue.component('l-map',LMap);
Vue.component('l-tile-layer',LTileLayer);
Vue.component('l-marker',LMarker);
plugins: [
{
src: '~/plugins/nuxt-leaflet',mode: 'client',},{
src: '~/plugins/vue-my-photos',],
这是结果的屏幕:
解决方法
最后,我发现我必须包含传单中的 css :
head() {
return {
link: [
{
rel: 'stylesheet',href: 'https://unpkg.com/leaflet@1.6.0/dist/leaflet.css',},],}
},
,
我也在使用 Vue Leaflet,它运行良好。尝试将 center
道具从数组更改为对象。
<l-map :zoom="13" :center="{
lat: -7.280976,lng: 112.796844,}">
完整代码
<div style="height: 350px; width: 100%">
<client-only>
<l-map
ref="myMap"
:zoom="zoom"
:center="center"
@update:center="centerUpdated"
@click="handleClick"
>
<l-marker :lat-lng="regionCenter">
<l-popup>Lokasi outlet</l-popup>
</l-marker>
<l-polyline
:lat-lngs="polyline.latlngs"
:color="polyline.color"
></l-polyline>
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
</l-map>
</client-only>
</div>
data () {
return {
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',zoom: 15,center: {
lat: -7.280976,bounds: null,regionCenter: [-7.280976,112.794944],address: {
long: '',display: '',polyline: {
color: 'red',latlngs: [],}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。