VueプロジェクトでVue2Leafletマップコンポーネントを使用する
最近 Vue2Leaflet という地図プラグインを使ったプロジェクトに出会ったので、その使い方を簡単に紹介します 詳細は公式ドキュメントを参照してください。
1. プラグインをインストールする
プロジェクトではvue2-leafletとleafletを使用するため、2つのプラグインをインストールする必要があります
npm install vue2-leaflet --save
npm install leaflet --save
2.LMapコンポーネントを追加する
<l-map style="width: 100%; height: 600px;" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="marker">
<l-popup :content="text"></l-popup>
</l-marker>
</l-map>
3. 必要なコンポーネントを導入する
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
export default {
name: 'VueLeaflet',
components: {
LMap,
LTileLayer,
LMarker,
LPopup
},
data () {
return {
zoom: 13,
center: L.latLng(47.413220, -1.219482),
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(47.413220, -1.219482), //添加的标签
text: 'this is a marker'
}
}
}
保存後、ブラウザで地図が表示されますが、Leaflet スタイル ファイルがインポートされていないため、想像とは異なり、汚くなっています。
4. リーフレット.css をインポートする
main.js ファイルに以下を追加します。
import 'leaflet/dist/leaflet.css';
追加後、地図は正常に表示されますが、明らかにマーカーを追加したことがわかります。なぜそれが表示されないのでしょうか? コンソールを開いて、マーカー アイコンが正しく読み込まれていないことを確認します。
5. アイコンのパスを変更する
main.js ファイルに以下を追加します。
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
エフェクト画像:
お役に立てれば幸いです。