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

现在我尝试了：在我的组件脚本文件中输入传单包。

沿着Leaflet的某个地方休息..在查看地图时我在控制台中没有错误，但是你可以看到它看起来不太好。

我会非常高兴能得到所有帮助！

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

/ Simon

Answer 1

您缺少宣传单样式表。使用链接标记添加它（对于正确的版本）：

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

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

1 个答案: