リーフレットはbrowserifyを使用してVueで動作しません

Question

私はbrowserifyとVueJSを使用して新しいです。地図サービスのリーフレットを使用したいプロジェクトがあります。だから、下のコードで私がそれを要求しようとしているように、私はnpmを使ってそれを引っ張った。コンパイルされたJSファイルを見ると、そこにリーフレットがあります。だから、動作しているようです。..

私は、ブラウザでそれを初期化しようとしたとき、私は私の結果のマップの画像を紹介します：あなたがタイルは本当に奇妙な行動、とされて見ることができるよう 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}) 
     }) 
    } 
}} 

私はコンポーネントのスクリプトファイルでリーフレットパッケージを要求しました。

どこかに沿ってリーフレットが壊れています。地図を表示しているときにコンソールにエラーは表示されませんが、見た目は良くありません。

私が得ることができるすべての援助に本当に満足しています！

編集： プロジェクトでchart.jsを使用しようとしましたが、リーフレットと同じように動作する必要がありました。リーフレットがうまくいかない理由を理解できません。

/サイモン

Answer 1

あなたはリーフレットスタイルシートが欠落しています。リンクタグを使用して（正しいバージョンのために）追加してください：

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