こんにちは、アンダーソンです。
今回は操作しているユーザの位置情報を取得して、GoogleMapを表示させる
コンポーネントを作成してみました。
Contents
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);
}
}
これだけで緯度経度から、地図を簡単に出すことができます。
(精度は微妙でしたが。)

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