如何将 Leaflet.js 连接到 Vue.js

Question

如何在 Vue.js 中连接 vanilla 库，然后连接插件。 我知道有一个图书馆 - https://vue2-leaflet.netlify.app/。但是功能有限，并且没有所有必要的插件。

我有一个沙盒，我尝试在其中连接地图和插件 - https://codesandbox.io/embed/busy-gagarin-6od2q?fontsize=14&hidenavigation=1&theme=dark

Answer 1

不确定我的问题是否正确。您可以通过导入来在 Vuejs 中使用传单。

import L from "leaflet"

//omitted basic vue structure
data: () => ({
    theMap: null,
}),
mounted(){
    this.init()
}
methods:{
    init(){
        this.theMap = L.map("yourId", {})
        //...Your other codes and options
    }   
},  

别忘了包含你的传单 css

<style src="leaflet/dist/leaflet.css"></style>

Answer 2

正确的连接传单和插件 - https://codesandbox.io/s/busy-gagarin-6od2q?from-embed=&file=/src/App.vue:223-263