自分のいる場所とかで違うアイテムがもらえるゲームの位置ゲーとかもあるし。
技術的にどうやってんだろうと思って調べてみました。
どうやら、最近はブラウザでGPSの位置情報が取得できて、その位置情報をもとにJavaScriptでいろいろ処理したり、地図とかを表示しているようです。
ということで位置情報の取得はAPIを呼びだけなので、地図を表示するWebサイトのHTMLをつくってみました。
10分くらいごにょごにょJavaScriptを書けば位置情報とか地図ってすぐできんじゃん。
<html>
<head>
<style type="text/css">
#map-canvas {
width: 800px ;
height: 600px ;
}
</style>
</head>
<body>
<h1>Google Map Test</h1>
<!-- 地図が描画されるキャンパス -->
<div id="map-canvas">ここに地図が表示されます</div>
<!-- GoogleMap API JavaScript -->
<script src="https://maps.googleapis.com/maps/api/js?key=ここにAPIキーを入れる&v=3.24"></script>
<script language="JavaScript">
// 地図表示
var canvas = document.getElementById( 'map-canvas' ) ;
var latlng = new google.maps.LatLng( 35.792621, 139.806513 );
var mapOptions = {
zoom: 15 , // ズーム値
center: latlng , // 中心座標 [latlng]
};
var map = new google.maps.Map( canvas, mapOptions ) ;
// マーカーのインスタンスを作成する
var marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 35.792621, 139.806513 ) ,
} ) ;
//イベント
map.addListener('click', function(e) {
alert("kita!");
var lat=e.latLng.lat();
var lng=e.latLng.lng();
alert(""+lat);
alert(""+lng);
});
</script>
<!-- User JavaScript -->
<script src="googlemap_test.js" language="JavaScript"></script>
</body>
</html>
0 件のコメント:
コメントを投稿