スタンプラリー＠川崎市宮前区

fullscreen

Tetsuro_Toyoda

まだ作成途中ですが、川崎市宮前区をめぐるスポットのスタンプラリーです。

評価指数

アプリケーション

Play
JavaScript
CSS
HTML
概要
保存した実行結果

// Created by Tetsuro Toyoda Ver. 2015.01.22.2
var stampUrl = "http://app.linkdata.org/asset/4b2b5bcf.png";//スタンプの画像です。好きなものに変えてください
var circle = 200;// 目的地点との距離がこのメートル以下になればスタンプを押せます
var ageofstamp = 365; //この日数が経過するとスタンプはリセットされます
var nameToShow = "施設名" // ツイッターでシェアする際に、このプロパティの値を地点の名前としてツイッターに挿入します。省略（ヌル文字列）すればサブジェクト名が選択されます
var currlat = null; //現在地点の緯度
var currlong = null; //現在地点の経度
var destlat = null; //目的地の緯度
var destlong = null; //目的地の経度
var points = new Array(); // スタンプのある地点のリスト
var timerid; // 現在地点を定期的に観測するためのタイマー
var lastTimeOfSuccess =""; // 前回現在位置を取得するのに成功した時刻
var timerInterval = 10;//位置情報を取得する間隔（秒単位）
var displayMode = "allLoc"; // 表示モード
var map = null; // 現在地の情報を表示するマップ
var mapCircle = null;//目的地のサークル群
var mapCircleIsStamped = null;//サークルがスタンプされていればtrue
var currPosMarker = null;// 現在位置を表すマーカー
var directionsService = null;
var directionsDisplay = null;
var travelMode = ['NOTHING','WALKING','DRIVING'];
var travelModeJ = ['解除','徒歩','自動車'];
var travelIndex = 0;
var destinationURI = "";
var destButtonCaption = ['目的地に設定する','目的地設定を解除する'];
var debug = false; // デバッグ時にtrueでタイマーをオフにできる

function setDestination( i )
{
	var eid = 'destroutemap'+i.toString(10);
	document.getElementById('destroutebutton'+i.toString(10)).value = destButtonCaption[1];
	destinationURI = points[i][5];
	travelIndex = 1;
	curLoc();
}

function showAPoint(i,p)
{
			$("#result").append("<hr>");
			if ( p[1] != null && p[2] != null ) // 緯度経度がある地点には目的地設定ボタンをつける
			{
				$("#result").append("<input id='destroutebutton"+i+"' type='button' value='"+destButtonCaption[0]+"' onclick='setDestination("+i+")'/>");
//				$("#result").append("<div id='destroutemap"+i+"'></div>");
			}
			$("#result").append(p[0]);
}

function currTime() {
	DD = new Date();
	Month = DD.getMonth() + 1;
	Day = DD.getDate();
	Hours = DD.getHours();
	Minutes = DD.getMinutes();
	Seconds = DD.getSeconds();
	return Month+"月"+Day+"日"+Hours+"時"+Minutes+"分"+Seconds+"秒";
}

function zoomCurrentPos()
{
	var zoom = map.getZoom();
	zoom += 1;
	map.setZoom(zoom);
	map.setCenter(new google.maps.LatLng(currlat,currlong));
}

function zoomDestinationPos()
{
	var zoom = map.getZoom();
	zoom += 1;
	map.setZoom(zoom);
	map.setCenter(new google.maps.LatLng(destlat,destlong));
}
function changeTravalMode(i)
{
	travelIndex = i;
	showTravelMode();
	showRouteToDestinationFromURI();
}

//　目的地周辺のサークルオブジェクトを表示する
function newMapCircle( lat, long, isStamped, uri )
{
	var col = "#FF0000";
	if ( isStamped == true ) col = "#0000FF";
	var locationCircle = {
			strokeColor: col,
			strokeOpacity: 0.20,
			strokeWeight: 2,
			fillColor: col,
			fillOpacity: 0.20,
			map: map,
			center: new google.maps.LatLng(lat,long),
			radius: circle
			};
	var mc = new google.maps.Circle(locationCircle);
	// サークルがクリックされたらルート検索する
	google.maps.event.addListener(mc, 'click', function() {
		travelIndex += 1;
		showRouteToDestination(lat,long);
		destinationURI = uri;
 	});
	return mc;
}
function showRouteToDestination( lat, long )
{
		destlat = null;
		destlong = null;
		showTravelMode();
		// 目的地のサークルをクリックしてルート検索
		directionsDisplay.setMap(null);
		if ( travelMode[travelIndex] != 'NOTHING' )
		{
			destlat = lat;
			destlong = long;
			directionsDisplay.setMap(map);
 			var request = {
      			origin: new google.maps.LatLng(currlat,currlong),
      			destination: new google.maps.LatLng(lat,long),
      			travelMode: google.maps.TravelMode[travelMode[travelIndex]]
  			};
 			directionsService.route(request, function(response, status){
				if (status == google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
				}
			});
		}
}

//現在位置地図のイニシャライズ
function initMap()
{
			var mapOptions = {
	    	zoom: 15,
 		   	center: new google.maps.LatLng(currlat, currlong)
  			};
			$("#map-canvas").height("50%");
			$("#map-canvas").width("100%");
  			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 			currPosMarker = new google.maps.Marker({
				position: new google.maps.LatLng(currlat,currlong),
				map: map,
				title: 'Current Position'
			});
			directionsService = new google.maps.DirectionsService();
			directionsDisplay = new google.maps.DirectionsRenderer();
//			stampData();
//			sortPoints();
			// スタンプポイントに円を描く
			mapCircle = new Array();
	mapCircleIsStamped = new Array();
			$.each(points, function(i, p) {
	    // mapCircleに各地点のURIをキーにしてCircleを登録
				mapCircle[p[5]] = newMapCircle(p[1],p[2],p[3],p[5]);
				mapCircleIsStamped[p[5]] = p[3];
			});
}

// 全地点を表示
function allLoc() {
	displayMode = "allLoc";
	stampData();
	displayData();
}

// 目的地を探す	
function finDes() {
	displayMode = "finDes";
	stampData();
	displayData();
}

// スタンプを見る	
function vieSta() {
	displayMode = "vieSta";
	stampData();
	displayData();
}

// アプリを見る	
function seeApp() {
	displayMode = "seeApp";
	stampData();
	displayData();
}

function sortPoints()
{
	$.each(points, function(i, p) {
		p[6] = Distance(currlong, currlat, p[2], p[1]);
	});
	points.sort(function(p1, p2) {
		return p1[6] - p2[6];
	});
}

// Get a parameter value in URL (e.g. ?paramString=value )
function getParameterFromURL( paramString )
{			
	var value = "";
	var q = top.window.location.href.split("?");
	if ( q.length == 2 ){
		var r = q[1].split("&");
		for ( var i = 0; i < r.length; i++ ){
			var s = r[i].split("=");
			if ( decodeURIComponent(s[0]) ==  paramString )
				value = decodeURIComponent(s[1]);
		}
	}
 	return value;
}
function getCurrentAppURL()
{
	return decodeURIComponent(top.window.location).split("?")[0];
}

// Highlight keyword in the string
function highlight( string, keyword )
{
	if ( keyword.length > 0 ) {
		var ss = string.split(keyword);
		var len = ss.length;
		if ( len > 1 ) {
			string = ss[0];
			for ( i = 1; i < len; i++ )
//				string += "<font color=\"red\">"+keyword+"</font>"+ss[i];
				string += "<span class=\"highlight\">"+keyword+"</span>"+ss[i];
		}
	}
	return string;
}

// get the last name of the string separated with # and /
function getLastName( string )
{
	string = decodeURIComponent(string);
	var sharp = string.split("#");
	var slash = sharp[sharp.length-1].split("/");
	var lastName = slash[slash.length-1];
	return lastName;
}

// shortening URL e.g. http://.../123.jpg
function shortenURL( url )
{
	url = decodeURIComponent(url);
	var slash = url.split("/");
	var lastName = slash[slash.length-1];
	return url.split(":")[0]+"://.../"+lastName;
}

function SetCookie( uri, value )
{
	top.document.cookie = encodeURIComponent( uri ) + "=" + encodeURIComponent( value ) + "; max-age="+ageofstamp*24*3600;
}

function GetCookies()
{
    var result = new Array();
    var allcookies = top.document.cookie;
    if( allcookies != '' )
    {
        var cookies = allcookies.split( '; ' );

for( var i = 0; i < cookies.length; i++ )
        {
            var cookie = cookies[ i ].split( '=' );

// クッキーの名前をキーとして 配列に追加する
			var ck = decodeURIComponent(cookie[ 0 ]);
			if ( ck.indexOf("://linkdata.org") > 0 || ck.indexOf("://app.linkdata.org") > 0 )
				result[ ck ] = decodeURIComponent( cookie[ 1 ] );
      }
    }
    return result;
}

function Distance( long1, lat1, long2, lat2 )
{
	var r = 6378137; //地球の半径(m)
	var d = r * Math.acos( Math.sin(lat1/180*Math.PI)*Math.sin(lat2/180*Math.PI) + Math.cos(lat1/180*Math.PI)*Math.cos(lat2/180*Math.PI)*Math.cos((long2-long1)/180*Math.PI) );
	return d;
}

$(function(){
	$("#curloc").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); curLoc(); return false;});
	$("#allloc").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); allLoc(); return false;});
 	$("#findes").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); finDes(); return false;});
 	$("#viesta").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); vieSta(); return false;});
 	$("#seeapp").click(function(){ if ( $(window).width() <= 600 ) $("#menu").slideToggle(); seeApp(); return false;});
 $("#toggle").click(function(){
    $("#menu").slideToggle();
    return true;
  });
  $(window).resize(function(){
    var win = $(window).width();
    var p = 600;
    if(win > p){
      $("#menu").show();
    } else {
//      $("#menu").hide();
    }
	  		if ( map != null )
			google.maps.event.trigger(map, 'resize');

});
});

span.highlight {color: red;}
span.propertyName {color: gray;}
span.subject { color: blue; }
span.object{ color: black; }
body { background: white; }
a, a span { text-decoration: underline; }
a:hover, a span:hover { text-decoration: none; }

#map-canvas {
        height: 0%;
        margin: 0px;
        padding: 0px
}
#menu{
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#menu li{
  display: block;
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0; }
#menu li a{
  display: block;
  padding: 12px 0 10px;
  background: #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#menu li a:hover{
  background: #444;
}
#toggle{ 
 display: none;
}
@media only screen {
    #menu li{
    width: 20%;
    border-bottom: 1px solid #444;
  }
}
@media only screen and (max-width: 600px) {
  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #222;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #222;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
}

このアプリをForkして新しいアプリを作るダウンロード

このアプリ作品をwebから探す

作者メッセージ送信	Tetsuro_Toyoda
共同編集者	Sayoko Shimoyama
実行回数	555
ウェブサイト
ライセンス
Fork count	6
作成日	2014年12月25日
最終更新日	2015年1月26日