【Lightning Web Component】位置情報を取得してみました

こんにちは、アンダーソンです。
今回は操作しているユーザの位置情報を取得して、GoogleMapを表示させる
コンポーネントを作成してみました。

JSで位置情報取得

ご存知の通り、LWCはJavaScriptなので普通にJSの書き方で位置情報を取得することができます。

function success(position) {
            const latitude  = position.coords.latitude;
            const longitude = position.coords.longitude;
        }

        navigator.geolocation.getCurrentPosition(success);

この書き方で緯度軽度の取得ができます。
もしブラウザで位置情報の取得を許可していない場合は、許可しますか？が出ると思いますので、許可すると取得可能になります。

LWCにはめてみる

これをLWCでやってみました。下記コードです。

<template>
    <lightning-card title="Map" icon-name="action:map">
        <p>緯度：{latitude}</p>
        <p>経度：{longitude}</p>
        <div>
            <lightning-map 
                map-markers={mapMarkers}
                zoom-level={zoomLevel}> 
            </lightning-map>
        </div>
    </lightning-card>
</template>

import { LightningElement, track } from 'lwc';

export default class Map extends LightningElement {
    
    latitude = null
    longitude = null
    zoomLevel = 15

    @track mapMarkers = []

    connectedCallback(){
        let _this = this

        function success(position) {
            _this.latitude = position.coords.latitude;
            _this.longitude = position.coords.longitude;
            let mapMarkers = [
                {
                    location: {
                        Latitude: String(position.coords.latitude),
                        Longitude: String(position.coords.longitude),
                    },
                    title: 'Anderson\'s home',
                }
            ]

            _this.mapMarkers = mapMarkers
        }

        navigator.geolocation.getCurrentPosition(success);
    }
}

これだけで緯度経度から、地図を簡単に出すことができます。
(精度は微妙でしたが。)

これを使えば簡単にアクセスした場所を記録するなんてこともできそうです。
ぜひ参考にしてみてください。