Webアプリケーションを公開するまでのつぶやき 6
プロローグはこちら↑。
地図を使いたい
地図にはOpenStreetMapを使いたいと思い、色々調べた結果vue-leafletを使うと良さそうかなと思いあたりインストール。
とりあえずこう。
npm i -D @vue-leaflet/vue-leaflet leaflet
で、使いたいファイルでimportしてみたのですが、インポートがうまくいかずエラーになってしまいました。
もしかしたら何かやり方があるのかもしれないですが、今の私にはこれを軌道修正する能力はないので一旦保留。
別の方法でMap表示を試みます。
OpenLayer
OpenLaylerを使って地図を表示させてみようと思います。
ここに書いている通りに実装。
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'MapScreen',
setup(props) {
const center = ref([139.7673068, 35.6809591]);
const projection = ref('EPSG:4326');
const zoom = ref(16);
const rotation = ref(0);
return {
center,
projection,
zoom,
rotation,
}
},
});
</script>
<template>
<div class="w-full h-40">
<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">
<ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom"
:projection="projection" />
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
</ol-map>
</div>
</template>
位置や拡大率なんかは調整して東京駅にフォーカスするようにしてます。
ここに現在地をGPSで取得し、周辺の図書館を地図にマッピングしたいと思っています。
あと、レイアウトもカッコ悪いので中央の画面全体に地図が広がるように調整したいですね。
とりあえず、スタイルを修正。
いい感じ!
現在地取得
この技術を使う。
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
},
(error) => {
}
);
}
こんな感じ。
macの場合はセキュリティとプライバシーからChromeの位置情報を許可しないと使えないみたいです。
許可していない場合にはブラウザが設定から位置情報許可してねっていうダイアログが出るので親切ですね。
他のデバイスだとどうなるか追々確認しようと思います。
mounted() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
this.center = [position.coords.longitude, position.coords.latitude];
this.isLoading = false;
},
(error) => {
alert("位置情報の取得に失敗しました。");
this.isLoading = false;
}
);
}
}
こんな感じでmountedで取得した現在地を地図の表示位置に反映する。
位置バレしちゃうので画像ではお見せできませんが、いい感じに表示できました。
現在地にアイコンとかつけたいですよね。
それはまた次回やっていきたいと思います!
ここまで読んでいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか?