<!DOCTYPE html>
<html lang="ja">
<head>
<title>GPSGame-taka</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../src/leaflet.css" /> <!-- (1) -->
<script src="../src/leaflet.js"></script>
<script src="../src/js/singleclick.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"><!--いろんなアイコンのCSS-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>GPSGame</h1>
<p>
緯度<input type="text" id="lat_input" /><br>
経度<input type="text" id="lng_input" /><br>
倍率<input type="text" id="zoom_input" /><br>
マーカー1<input type="text" id="distance_input" /><br>
</p>
<button type="button" onclick="tryGetGPS()">GPS取得</button>
<div class="section">
<div id="mymap"></div>
<div id="menu-ui"><img src="../img/ryuku.png" class="menu" id="ryuku"></div>
</div>
<div class="menu-popup" id="items">
<div class="menu-popup-inner">
<ul class="upper">
<li class="item-inner" id="item1"></li>
<li class="item-inner" id="item2"></li>
<li class="item-inner" id="item3"></li>
<li class="item-inner" id="item4"></li>
<li class="item-inner" id="item5"></li>
<li class="item-inner" id="item6"></li>
<li class="item-inner" id="item7"></li>
</ul>
<ul class="lower">
<li class="item-inner" id="item8"></li>
<li class="item-inner" id="item9"></li>
<li class="item-inner" id="item10"></li>
<li class="item-inner" id="item11"></li>
<li class="item-inner" id="item12"></li>
<li class="item-inner" id="item13"></li>
<li class="item-inner" id="item14"></li>
</ul>
</div>
</div>
<div class="popup" id="js-popup">
<div class="popup-inner">
<div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div>
<a href="#"><img src="../img/nyan_cat.gif" alt="ポップアップ画像"></a>
</div>
<div class="black-background" id="js-black-bg"></div>
</div>
<!--
<div>
<h1>参考文献</h1>
<a href="https://www.achiachi.net/blog/leaflet/get_latlngzoom">見ている場所の座標を取得する方法</a>
<a href="https://cpoint-lab.co.jp/article/201902/8137/">マーカーの位置調整</a>
<a href="https://kita-note.com/leaflet-rs-marker-dtl">マーカーの設定</a>
<a href="https://medium-company.com/leaflet-remove-removelayer/">マーカーの削除方法</a>
</div>
-->
<!-- #mymap であるdivを配置したあとで (4) -->
<script type="text/javascript" src="GPSGame.js" charset="utf-8"></script>
</body>
</html>
