时间戳

首页 > 解决方案 > 通过 CDN 在 jsfiddle 中渲染 vue2leaflet 地图

jsfiddle - 通过 CDN 在 jsfiddle 中渲染 vue2leaflet 地图

问题描述

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

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

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

我还查看了使用 Vue 和通过 CDN 加载的自定义库的其他 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>

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;
}

标签： jsfiddlevue2leaflet

解决方案

您的小提琴中有多个错误。

首先，没有安装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 方式添加您的组件（查看官方文档：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/

推荐阅读