【Vue.js】目指せ地理マスター！首都の緯度・経度から国名を当てるゲーム #JavaScript

2022年6月1日時点の世界の首都（未承認含む）の緯度・経度がランダムに表示され、その座標データから国名を当てるゲームです。

Vue.js バージョン3.2.29

・CodePen上だと「正解の場所を地図で確認」リンク押下すると「www.google.co.jp はブロックされています」メッセージが表示されGoogle Mapのサイトが開けません。リンク押下を試したい場合は、リンクを右クリック -> 新しいタブで開くから開いてください。

・国名は一般的ではないものがあります。例えば"アメリカ"は"アメリカ（米国）"と入力しないと不正解となります。当記事ではVue.jsの勉強を目的として作成したため、国名については特に考慮せずダウンロードしたデータそのままを使用しています。

・当初はGoogle Mapを埋め込みで表示させようとしましたが、Vue.jsの非同期処理でCross Origin制約に引っかかってしまうようで出来ませんでした。該当箇所はコメントアウトしてありますので、試したい方はコメントアウトを外してください。

JavaScriptのコード内で定義している国データの定数は、世界の首都の位置データ Location Data of World Capitalsからデータダウンロードして整形したものです。

See the Pen Untitled by nobu (@nobu12n) on CodePen.