通过 <script src=... > import 直接使用 Vue2leaflet答案

【问题标题】：Using Vue2leaflet directly via <script src=... > import通过 <script src=... > import 直接使用 Vue2leaflet
【发布时间】：2020-08-25 20:11:19
【问题描述】：

我是 JavaScript 新手，我正在尝试为我用 Python 创建的部分网站添加一些现代交互性。 Vue 对我来说看起来很有吸引力，我想使用它没有我不熟悉的节点/webpack 等。

Vue 网站对如何通过<script src=... > 导入框架本身有相当全面的描述，但我也想使用 Vue2leaflet 包。

我尝试使用 <script src=... > 将其添加到网页，然后在我的脚本中注册组件

Vue.component('l-map', Vue2Leaflet.LMap);
Vue.component('l-tile-layer', Vue2Leaflet.LTileLayer);
Vue.component("l-circle", Vue2leaflet.LCircle)

我能够使用平铺层渲染 openStreetMaps，但是我无法将 l-circle 渲染到地图。
这是代码：https://jsfiddle.net/b2c1rzfa/14/

为什么没有画出圆圈（对于任何一个尝试过的选项）？描述的Vue2leaflet组件的导入注册方法是否正确？

【问题讨论】：

标签： vue.js vue2leaflet

【解决方案1】：

我在 Vue 论坛上收到了一个答案，将其粘贴到这里是为了其他人的利益（感谢裙子）- 如下所述修改后一切正常：

注册组件的方式不是问题。

主要问题是这一行： <l-tile-layer :url="ll.url"/>
您需要将其更改为： <l-tile-layer :url="ll.url"></l-tile-layer>
因为您使用的是在 Vue 获取之前，它会被浏览器解析为 in-DOM 模板它附近的任何地方。浏览器的解析器不支持自关闭使用尾随 /> 的标签。结果是跟随的标签将被视为孩子而不是兄弟姐妹。

一旦你解决了这个问题，你会得到一些验证错误，因为您的第二个圈子缺少一些 : 属性的前缀。

然后你会得到一个错误，因为你还没有注册 l-popup 但是如果你缩小你会看到你的圈子。

【讨论】：