とあるバス会社のAPI情報を使って、monacaというクラウドによるmonacaIDEでプログラミングを作成しました。
指定したバスの運行状況の情報を、Googleの地図と一緒に表示させるスマートフォンプログラミングによるものなのですが、検索したバスが、走行しているときには普通に表示させて、走行してない時にはその旨を表示させる条件分岐のプログラミングを作成したいのですが、やり方が分かりません。すみませんがご教授願います。
以下のプログラミングが作ったものです。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDTsBe_Ffoqs3O3-xMJv8b9QW6Kh5-cPIU"></script>
<script>
//
function display(){
//
var busid = document.getElementById('busid').value;
//
//
var script = document.createElement('script');
//
var url = 'http://tutujibus.com/';
url += 'busLookup.php';
url += '?busid=' + busid;
url += '&callback=jsonp_callback';
//
script.src = url;
//alert(url);
//
document.body.appendChild(script);
}
function jsonp_callback(data){
//dataから目的のフィールドを取り出す
//console.log(data.speed);
//
var mes='';
mes += data.destination + '行き';
mes += data.binid + '便<br>';
mes += '速度:時速' + data.speed + 'キロ<br>';
//
document.getElementById('message').innerHTML = mes;
//
createMap(data.latitude,data.longitude);
}
//
function createMap(lat,lng){
//
var latlng = new google.maps.LatLng(lat,lng);
//
var mapOption ={
zoom:17,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
//地図を表示
var map = new google.maps.Map(document.getElementById('map'),mapOption);
//
var marker = new google.maps.Marker({position:latlng,map:map});
}
</script>
</head>
<body>
<h1>つつじバスの運行状況</h1>
<br>
バスの号車を指定し［表示］をタップすると、運行状況が表示されます。
<br>
<select id="busid">
<option value="1">1号車</option>
<option value="2">2号車</option>
<option value="3">3号車</option>
<option value="4">4号車</option>
<option value="5">5号車</option>
<option value="6">6号車</option>
<option value="7">7号車</option>
<option value="8">8号車</option>
<option value="9">9号車</option>
<option value="10">10号車</option>
<option value="11">11号車</option>
<option value="12">12号車</option>
<option value="13">13号車</option>
<option value="14">14号車</option>
<option value="15">15号車</option>
<option value="16">16号車</option>
<option value="17">17号車</option>
</select>
<input type="button" value="表示" onclick="display()">
<br>
<div id="message"></div>
<div id="map" style="width:100%; height:350px;"></div>
</body>
</html>
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/18 00:40
2019/07/18 10:19
2019/07/18 11:58