通过 CDN 在 jsfiddle 中渲染 vue2leaflet 地图

Question

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

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

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

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

显然 Whosebug 要求 jsfiddle link 也需要 post 中的代码，这对我来说有点奇怪，因为代码确实包含在 link 中，它可以也执行它，但它在这里：

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>

JS:

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

您的fiddle中存在多个错误。

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

首先，安装您的 CDN（Vue、Leaflet CSS、Leaflet js、Vue-Leaflet）：

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-way（查看官方文档：https://vue2-leaflet.netlify.app/quickstart/#if-imported-by-cdn ):

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

检查工作 fiddle：https://jsfiddle.net/scpta4jq/1/

通过 CDN 在 jsfiddle 中渲染 vue2leaflet 地图

Rendering a vue2leaflet map in jsfiddle via CDN

jsfiddle

vue2leaflet

HTML:

JS:

CSS