如何解决如何在vue3 App中使用vue2-leaflet,需要进行哪些更改?
我要添加一个Openstreetmap组件。新手,直接进入Vue3(不要让我从Vue2开始),
MapLeaflet.vue:我从这里获取了代码:https://vue2-leaflet.netlify.app/examples/simple.html
并尝试修改为vue3套件,创建setup(),移动函数等。但是,看起来像return语句和一些导入需要进一步调整。我应该在此vue2-传单中进行哪些更改以使其在vue3中正常工作?
<template>
<div style="height: 500px; width: 100%">
<div style="height: 200px overflow: auto;">
<p>First marker is placed at {{ withPopup.lat }},{{ withPopup.lng }}</p>
<p>Center is at {{ currentCenter }} and the zoom is: {{ currentZoom }}</p>
<button @click="showLongText">
Toggle long popup
</button>
<button @click="showMap = !showMap">
Toggle map
</button>
</div>
<l-map
v-if="showMap"
:zoom="zoom"
:center="center"
:options="mapOptions"
style="height: 80%"
@update:center="centerUpdate()"
@update:zoom="zoomUpdate()"
>
<l-tile-layer
:url="url"
:attribution="attribution"
/>
<l-marker :lat-lng="withPopup">
<l-popup>
<div @click="innerClick()">
I am a popup
<p v-show="showParagraph">
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque
sed pretium nisl,ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-popup>
</l-marker>
<l-marker :lat-lng="withTooltip">
<l-tooltip :options="{ permanent: true,interactive: true }">
<div @click="innerClick">
I am a tooltip
<p v-show="showParagraph">
Lorem ipsum dolor sit amet,ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-tooltip>
</l-marker>
</l-map>
</div>
</template>
<script>
import { latLng } from "leaflet";
import { LMap,LTileLayer,LMarker,LPopup,LTooltip } from "vue2-leaflet";
export default {
name: "Example",components: {
LMap,LTooltip
},setup() {
function zoomUpdate(zoom) {
currentZoom = zoom;
}
function centerUpdate(center) {
currentCenter = center;
}
function showLongText() {
showParagraph = !this.showParagraph;
}
function innerClick() {
alert("Click!");
}
return {
zoom: 13,center: latLng(47.41322,-1.219482),url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',withPopup: latLng(47.41322,withTooltip: latLng(47.41422,-1.250482),currentZoom: 11.5,currentCenter: latLng(47.41322,showParagraph: false,mapOptions: {
zoomSnap: 0.5
},showMap: true
};
},methods: {
}
};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。