用CDN在jsfiddle中绘制vue2leaflet映射

Question

我正在尝试用Vue2Leaflet来渲染一个传单地图，这样我就可以在一个特定的问题上得到帮助，但我甚至无法在琐碎的情况下让它正确地呈现。我已经查过如何通过CDN在jsfiddle中加载库，而且据我所知，我做得很对。控制台中也没有错误。但地图不会渲染。

这就是摇摆不定的东西：https://jsfiddle.net/iboates/bywzgf1q/3/

Vue2Leaflet还需要vue-客户专用库。我把它放在我的本地代码库中，但是它可能与它为什么不能在jsfiddle中工作有关。我也是通过一个CDN加载这个库。

我还看过其他通过CDN加载的定制库使用Vue的jsfiddles，我不认为有什么不同。

显然，StackOverflow要求jsfiddle链接也需要文章中的代码，这对我来说有点奇怪，因为代码确实包含在一个也可以执行它的链接中，但如下所示：

HTML：

<div id="app">
<client-only>
      <l-map id="map" ref="map">
      <l-tile-layer
        :attribution="'x'"
        :url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'"
      />
<!--         <l-geo-json
          :geojson="geojsonData"
        /> -->
      </l-map>
      </client-only>
</div>

联署材料：

import { LMap, LTileLayer } from "./vue2-leaflet";

new Vue({
  el: "#app",
  components: {
    LMap,
    LTileLayer,
    ClientOnly
  },
  data: {
    geojsonData: {
        type: "FeatureCollection",
        features: []
      }
  },
  mounted() {
  }
})

CSS

#app {
  background-color: black;
  height: 500px;
  width: 500px;
}

#map {
  height: 500px;
  width: 500px;
}

Answer 1

你的小提琴里有很多错误。

首先，Vue没有安装。此外，您尝试导入Vue-传单，比如在Webpack / Rollup构建系统中，而不是从CDN中使用它的方式。

首先，安装您的CDN (Vue、传单CSS、传单js、Vue-传单)：

https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js
https://unpkg.com/leaflet@1.7.1/dist/leaflet.css
https://unpkg.com/leaflet@1.7.1/dist/leaflet.js
https://unpkg.com/vue2-leaflet@2.6.0/dist/vue2-leaflet.min.js

然后，以CDN方式添加组件(查看正式文档：https://vue2-leaflet.netlify.app/quickstart/#if-imported-by-cdn )：

components: {
    'l-map': window.Vue2Leaflet.LMap,
    'l-tile-layer': window.Vue2Leaflet.LTileLayer
}

检查工作小提琴：https://jsfiddle.net/scpta4jq/1/