如何在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:
        '&copy; <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 (将#修改为@）