问题标签 [vue2leaflet]

我正在使用 NuxtJS 并且我使用库https://vue2-leaflet.netlify.app但地图没有正确显示。这是我的代码和结果屏幕：

地图.vue：

nuxt-leaflet.js：

nuxt.config.js：

这是结果的屏幕：

我正在尝试在 jsfiddle 中使用Vue2Leaflet渲染 Leaflet 地图，这样我就可以获得特定问题的帮助，但我什至无法让它在微不足道的情况下正确渲染。我已经在 jsfiddle 中查找了如何通过 CDN 加载库，据我所知，我做得对。控制台中也没有错误。但是地图不会渲染。

这是 jsfiddle：https ://jsfiddle.net/iboates/bywzgf1q/3/

Vue2Leaflet 还需要vue-client-only库。我让它在我的本地代码库中工作，但也许它与为什么它不能在 jsfiddle 中工作有关。我也通过 CDN 加载这个库。

我还查看了使用 Vue 和通过 CDN 加载的自定义库的其他 jsfiddles，但我看不出有什么不同。

显然 StackOverflow 要求 jsfiddle 链接也需要帖子中的代码，这对我来说有点奇怪，因为代码实际上包含在一个也可以执行它的链接中，但在这里：

HTML：

JS：

CSS

在 singleMarkerMode 中使用图标时，将无法正常工作 link

但是当删除时<l-icon />，它会正常工作

可以同时使用吗？

28/02

在代码 1 中，我认为 refreshClusters() 会考虑 disableClusteringAtZoom。

所以我尝试在mounted中使用refreshClusters()。

结果：程序不考虑 disableClusteringAtZoom，并立即更改图标。

在代码 2 中，我尝试将初始 singleMarkerMode 设置为 false 并使用 @update:zoom 检查缩放，当它 < disableClusteringAtZoom 时，然后将 singleMarkerMode 设置为 true 并使用 refreshClusters()

结果：初始图标为自定义图标，当缩放<15时，图标发生变化，但之后，当缩放>=15时，无法改回自定义图标。

任何想法如何改回自定义图标？或任何使 singleMarkerMode 工作类似于 markercluster (multi) 的方法

代码1

代码2

使用 vue2-leaflet 我正在尝试创建一个自定义组件，但我找不到与传单 JS 教程中相同的实现onAdd和方法。onRemove

似乎L.Control传单中的真实内容已存储在其中，this.mapObject因此我找到了以下解决方法：

有一个更好的方法吗？

我在一个显示一些数据的项目中（我正在使用 vue2-leaflet）。事情是这样的，我有一个 Target 组件：

如您所见，我从 store.js 文件中导入了 detailsMarker 方法（使用 vue-stator，一种类似 vuex 的状态管理）：

然后我将 Target 组件导入到我的 Paris 路线中，在那里我对其中的数据进行了循环：

因此，当我单击我的标记时，detailsMarker 方法确实显示了侧边栏组件（带有 detailsMenu 数据），但它没有选择目标数组中的对象。我不明白为什么，因为在控制台中我没有错误。

我可以将 Leaflet.MarkerCluster.Freezable 与 vue2Leaflet 一起使用吗？我试图包含它并将它与我的标记集群上的 ref 一起使用，如下所示：this.$refs.cluster.disableClustering();，但它给出了错误“TypeError：this.$refs.cluster.disableClustering is not a function”。

我想专注于标记并通过使用按钮打开弹出窗口。我在按钮 click 上看到了传单打开特定标记弹出窗口，但我不确定如何在 vue2-leaflet 的包中实现逻辑。任何指针？

我想将“自定义”标记插入到 vue2-leaflet 组件中，我发现了一个非常有趣的库 leaflet.awesome.marker 适合该范围，但我不知道如何将诸如此类的外部库导入 VUE以及如何/是否可以将其集成到 vue2-leaflet 中。有什么建议（更好的示例代码）？谢谢。

该库 ( https://github.com/makinacorpus/Leaflet.TextPath ) 由一个 JavaScript 文件组成，其中包含一个应该在加载时执行的大函数，该函数定义了功能并将其添加到 Polyline 通过调用L.Polyline.include和L.LayerGroup.include. 有没有办法使用 Vue.js 在正确的位置导入和执行这个文件？

到目前为止，我通过 npm 安装了库，然后在全局和组件本身中尝试了import leaflet-textpathand 。在组件中会将 setText 函数添加到全局 L 对象，但既不会添加到 L-Polyline 组件，也不会添加到它的地图对象。import leaflet-textpath/leaflet.textpathimport "leaflet-textpath"

我已经看到了一些关于如何删除右下角传单属性的帖子。似乎传单的创建者对此没有任何问题，所以为了节省空间，我想删除我的。这是一个关于它的线程，但不幸的是没有与 Vue 相关的答案。 https://gis.stackexchange.com/questions/192088/how-to-remove-attribution-in-leaflet

我正在使用 nuxt，但如果它针对 Vue，将不胜感激。l-tile-layer 有一个 attribute-prop 确实可以帮助我添加属性，但是删除它让我意识到属性似乎连接到 l-map 组件，因为它在没有图块层的情况下可见。

TLDR：我想删除“传单”

建议？