Leaflet 不会使用 browserify 与 Vue 一起工作

Question

我是 browserify 和 VueJS 的新手。我有一个项目，我想在其中使用地图服务 Leaflet。因此，正如我在下面的代码中所示，我尝试要求它，我已经使用 npm 将其拉入。如果我查看已编译的 JS 文件，我可以在那里找到 Leaflet。所以这似乎有效..

当我尝试在浏览器中初始化它时，我将显示生成的地图的图像： Broken Leaflet map

正如您所看到的那样，这些图块的行为非常奇怪，没有任何东西可以正常工作。拖动地图确实很奇怪..

这是组件 JS 的代码。

var L = require('leaflet');

module.exports = {

data: function () {
    return {
        map: false,
        samples: [],
        messages: [],
        customer_id: '',
        year: ''
    }
},

methods: {

fetch: function (id, year, successHandler) {
    var that = this
    that.$set('customer_id', id)
    that.$set('year', year)
    successHandler(id);
}

},

ready: function () {
    var map = L.map('map').setView([41.3921, 2.1705], 13);

    L.Icon.Default.imagePath = 'images/';

    var osmTiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var attribution = '© OpenStreetMap contributors';

    L.tileLayer(osmTiles, {
        maxZoom: 18,
        attribution: attribution
    }).addTo(map);

},

route: {
    data: function (transition) {
        this.fetch(this.$route.params.customer_id, this.$route.params.year, function (data) {
            transition.next({customer_id: data})
        })
    }
}}

现在我尝试 require:ing 我的组件脚本文件中的传单包。

Leaflet 在某处中断了。我在查看地图时在控制台中没有收到任何错误，但如您所见，它看起来不太好。

如果能得到所有帮助，我将非常高兴！

编辑：我刚刚尝试在我的项目中使用 chart.js，与传单一样需要，就像一个魅力。无法理解为什么传单不起作用。

/西蒙

Answer 1

您缺少传单样式 sheet。使用 link 标签添加它（对于正确的版本）：

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />

Leaflet 不会使用 browserify 与 Vue 一起工作

Leaflet wont work with Vue using browserify

leaflet

browserify