You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
359 lines
11 KiB
359 lines
11 KiB
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<!-- 主頁header -->
|
|
<?php
|
|
|
|
/*--- 處理session ----*/
|
|
include "include-session-security.php"; #確認session
|
|
$fixnumber = $_GET["fixnumber"];
|
|
|
|
require_once "db/database.php"; # 載入db.php來連結資料庫
|
|
#$repairerid = "B000000001";
|
|
#$issue_location_lat = floatval("25.01666");
|
|
#$issue_location_lng = floatval("121.51666");
|
|
|
|
//由fixnumber找出facility_no、維修人員id與連絡電話。
|
|
$data = array(); # 設置一個空陣列來放資料
|
|
$sql = "SELECT * FROM repair where fixnumber = '$fixnumber'"; # sql語法存在變數中
|
|
$data = mysqli_query($link,$sql); # 用mysqli_query方法執行(sql語法)將結果存在變數中
|
|
foreach($data as $data){
|
|
$facilityno = $data['facilityno'];
|
|
$repairerid = $data['repairerid'];
|
|
$repairer_phone_call_help = $data['phone_call_help'];
|
|
}
|
|
|
|
#由facility_no找出電梯經緯度
|
|
$data = array(); # 設置一個空陣列來放資料
|
|
$sql = "SELECT latitude, longitude FROM facility where facilityno = '$facilityno'"; # sql語法存在變數中
|
|
$data = mysqli_query($link,$sql); # 用mysqli_query方法執行(sql語法)將結果存在變數中
|
|
foreach($data as $data){
|
|
$issue_location_lat = $data['latitude'];
|
|
$issue_location_lng = $data['longitude'];
|
|
}
|
|
|
|
|
|
//找出維修人員最新位置
|
|
$data = array(); # 設置一個空陣列來放資料
|
|
$sql = "SELECT * FROM location_last where ((latitude IS NOT NULL) and (longitude IS NOT NULL) and (account_id = '$repairerid'))"; # sql語法存在變數中
|
|
$data = mysqli_query($link,$sql); # 用mysqli_query方法執行(sql語法)將結果存在變數中
|
|
$total_item = $data->num_rows;
|
|
foreach($data as $data){
|
|
$repairer_id = $data['account_id'];
|
|
$repairer_name = $data['name'];
|
|
$repairer_pid = $data['pid'];
|
|
$repairer_lat = $data['latitude'];
|
|
$repairer_lng = $data['longitude'];
|
|
$repairer_upload_time = $data['upload_time'];
|
|
}
|
|
|
|
/*
|
|
echo $repairer_id . "<br>";
|
|
echo $repairer_name . "<br>";
|
|
echo $repairer_pid . "<br>";
|
|
echo $repairer_lat . "<br>";
|
|
echo $repairer_lng . "<br>";
|
|
echo $repairer_upload_time . "<br>";
|
|
echo $fixnumber;
|
|
*/
|
|
|
|
$center_lat = ($issue_location_lat + $repairer_lat) / 2;
|
|
$center_lng = ($issue_location_lng + $repairer_lng) / 2;
|
|
|
|
include "include-header.php";
|
|
?>
|
|
|
|
<!-- * 主頁header -->
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
height: 600px;
|
|
width: 100%;
|
|
background: #000;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!-- loader -->
|
|
<div id="loader">
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
</div>
|
|
<!-- * loader -->
|
|
|
|
<!-- App Header -->
|
|
<div class="appHeader bg-primary text-light">
|
|
<div class="left">
|
|
<a href="javascript:;" class="headerButton goBack">
|
|
<ion-icon name="chevron-back-outline"></ion-icon>
|
|
</a>
|
|
</div>
|
|
<div class="pageTitle">維修人員目前位置</div>
|
|
<!--
|
|
<div class="right">
|
|
</div>
|
|
-->
|
|
</div>
|
|
<!-- * App Header -->
|
|
<div id="map2" style="margin-top:30px;"></div>
|
|
<script>
|
|
var map;
|
|
var markers = [];
|
|
// 起點
|
|
var repairer_lat =<?php echo $repairer_lat; ?>;
|
|
var repairer_lng =<?php echo $repairer_lng; ?>;
|
|
// 終點
|
|
var issue_location_lat =<?php echo $issue_location_lat; ?>;
|
|
var issue_location_lng =<?php echo $issue_location_lng; ?>;
|
|
|
|
var center_lat =<?php echo $center_lat; ?>;
|
|
var center_lng =<?php echo $center_lng; ?>;
|
|
|
|
//此處是計算最佳zoom的程式
|
|
var GLOBE_WIDTH = 256; // a constant in Google's map projection
|
|
var west = <?php echo min($repairer_lng, $issue_location_lng); ?>;
|
|
var east = <?php echo max($repairer_lng, $issue_location_lng); ?>;
|
|
var north = <?php echo max($repairer_lat, $issue_location_lat); ?>;
|
|
var south = <?php echo min($repairer_lat, $issue_location_lat); ?>;
|
|
var angle = east - west;
|
|
if (angle < 0) {
|
|
angle += 360;
|
|
}
|
|
var angle2 = north - south;
|
|
if (angle2 > angle) angle = angle2;
|
|
var zoomfactor = Math.round(Math.log(960 * 360 / angle / GLOBE_WIDTH) / Math.LN2) - 2;
|
|
//此處是計算最佳zoom的程式
|
|
|
|
|
|
var position = [
|
|
{title:'<?php echo $repairer_upload_time; ?>', label:'目前位置', lat:repairer_lat, lng:repairer_lng},
|
|
{title:'<?php echo $repairer_name; ?>',label:'電梯位置',lat:issue_location_lat,lng:issue_location_lng}
|
|
];
|
|
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
zoom: zoomfactor,
|
|
center: {
|
|
lat: center_lat,
|
|
lng: center_lng
|
|
}
|
|
});
|
|
|
|
for (var i = 0; i < position.length; i++) {
|
|
addMarker(i);
|
|
}
|
|
|
|
track();
|
|
|
|
function track() {
|
|
var origin = new google.maps.LatLng(repairer_lat, repairer_lng);
|
|
var destination = new google.maps.LatLng(issue_location_lat, issue_location_lng);
|
|
const waypts = [];
|
|
var mapOptions = {
|
|
zoom: 14,
|
|
center: origin
|
|
}
|
|
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
|
|
var directionsRenderer = new google.maps.DirectionsRenderer();
|
|
directionsRenderer.setMap(map);
|
|
calcRoute(origin, destination, directionsRenderer, waypts);
|
|
}
|
|
|
|
function calcRoute(origin, destination, directionsRenderer, waypts) {
|
|
var request = {
|
|
origin: origin,
|
|
destination: destination,
|
|
travelMode: google.maps.TravelMode['DRIVING'],
|
|
drivingOptions: {
|
|
departureTime: new Date(/* now, or future date */)
|
|
},
|
|
waypoints: waypts
|
|
};
|
|
var directionsService = new google.maps.DirectionsService();
|
|
directionsService.route(request, function(response, status) {
|
|
if (status == 'OK') {
|
|
console.log(response.routes[0].legs[0].distance.text);
|
|
console.log(response.routes[0].legs[0].duration.text);
|
|
$('#taketime').html("預估 "+response.routes[0].legs[0].duration.text+"（"+response.routes[0].legs[0].distance.text+"）");
|
|
directionsRenderer.setDirections(response);
|
|
}
|
|
});
|
|
}
|
|
/*--------------設定要畫箭頭：開始------------*/
|
|
/*
|
|
var lineSymbol = {
|
|
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW //箭頭樣式
|
|
//path: "assets/img/sample/photo/car.png"
|
|
|
|
};
|
|
|
|
var triangle_coordinates= [
|
|
{lat:repairer_lat, lng:repairer_lng},
|
|
{lat:issue_location_lat,lng:issue_location_lng}
|
|
];
|
|
|
|
var draw_polyline = new google.maps.Polyline({
|
|
path: triangle_coordinates,
|
|
geodesic: false,
|
|
strokeColor: '#ff3b19', //箭頭顏色
|
|
strokeOpacity: 2.0,
|
|
icons: [{ //icon
|
|
icon: lineSymbol,
|
|
offset: '100%',
|
|
}],
|
|
strokeWeight: 3
|
|
});
|
|
|
|
draw_polyline.setMap(map); //畫箭頭
|
|
*/
|
|
/*--------------設定要畫箭頭：結束------------*/
|
|
|
|
/*--------------設定要畫動畫：開始------------*/
|
|
/*
|
|
var lineSymbol = {
|
|
//設定動畫圖案為圓形
|
|
/*
|
|
path: google.maps.SymbolPath.CIRCLE,
|
|
scale: 5,
|
|
strokeColor: '#0000FF' //動畫圖案的顏色
|
|
*/
|
|
/*
|
|
//設定動畫圖案為車子
|
|
path: "M7 13.5c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5zm9 1c0-.276-.224-.5-.5-.5h-7c-.276 0-.5.224-.5.5s.224.5.5.5h7c.276 0 .5-.224.5-.5zm4-1c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5zm-17.298-6.5h-2.202c-.276 0-.5.224-.5.5v.511c0 .793.926.989 1.616.989l1.086-2zm19.318 3.168c-.761-1.413-1.699-3.17-2.684-4.812-.786-1.312-1.37-1.938-2.751-2.187-1.395-.25-2.681-.347-4.585-.347s-3.19.097-4.585.347c-1.381.248-1.965.875-2.751 2.187-.981 1.637-1.913 3.382-2.684 4.812-.687 1.273-.98 2.412-.98 3.806 0 1.318.42 2.415 1 3.817v2.209c0 .552.448 1 1 1h1.5c.552 0 1-.448 1-1v-1h13v1c0 .552.448 1 1 1h1.5c.552 0 1-.448 1-1v-2.209c.58-1.403 1-2.499 1-3.817 0-1.394-.293-2.533-.98-3.806zm-15.641-3.784c.67-1.117.852-1.149 1.39-1.246 1.268-.227 2.455-.316 4.231-.316s2.963.088 4.231.316c.538.097.72.129 1.39 1.246.408.681.81 1.388 1.195 2.081-1.456.22-4.02.535-6.816.535-3.048 0-5.517-.336-6.805-.555.382-.686.779-1.386 1.184-2.061zm11.595 10.616h-11.948c-1.671 0-3.026-1.354-3.026-3.026 0-1.641.506-2.421 1.184-3.678 1.041.205 3.967.704 7.816.704 3.481 0 6.561-.455 7.834-.672.664 1.231 1.166 2.01 1.166 3.646 0 1.672-1.355 3.026-3.026 3.026zm5.526-10c.276 0 .5.224.5.5v.511c0 .793-.926.989-1.616.989l-1.086-2h2.202z",
|
|
scale: 1.2, //控制動畫圖案放大倍數
|
|
strokeColor: '#ff3b19', //Hermes橘
|
|
fillColor: '#ff3b19' //Hermes橘
|
|
|
|
};
|
|
|
|
var line = new google.maps.Polyline({
|
|
path: [
|
|
{lat:repairer_lat, lng:repairer_lng},
|
|
{lat:issue_location_lat,lng:issue_location_lng}
|
|
],
|
|
icons: [{
|
|
icon: lineSymbol,
|
|
offset: '100%'
|
|
}],
|
|
strokeColor: '#ff3b19', //線條顏色
|
|
map: map
|
|
});
|
|
|
|
function animateCircle(line) {
|
|
var count = 0;
|
|
window.setInterval(function() {
|
|
count = (count + 1) % 200; //控制step
|
|
var icons = line.get('icons');
|
|
icons[0].offset = (count / 2) + '%'; //控制走行總比例
|
|
line.set('icons', icons);
|
|
}, 7); //控制每一段的速度
|
|
}
|
|
|
|
animateCircle(line);
|
|
*/
|
|
/*--------------設定要畫動畫：結束------------*/
|
|
|
|
|
|
|
|
}
|
|
|
|
//增加標註
|
|
function addMarker(e) {
|
|
markers[e] = new google.maps.Marker({
|
|
position: {
|
|
lat: position[e].lat,
|
|
lng: position[e].lng
|
|
},
|
|
map: map,
|
|
label: position[e].label,
|
|
title: position[e].title
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" async defer></script>
|
|
|
|
<style>
|
|
#info {
|
|
position: fixed;
|
|
z-index: 999;
|
|
bottom: 20px;
|
|
left: 0px;
|
|
background: #222;
|
|
padding: 20px 30px;
|
|
color: #fff;
|
|
box-shadow: rgba(0, 0, 0, .5) 0 0 10px;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
#info a {
|
|
color: #0bf;
|
|
transition: .2s;
|
|
}
|
|
|
|
#info a:hover {
|
|
color: #6df;
|
|
}
|
|
</style>
|
|
<!-- <div id="info">相關參考：<a id="infoLink" href="#" target="_blank"></a></div> -->
|
|
<script>
|
|
/*
|
|
var href = location.href;
|
|
var page = href.split("demo/");
|
|
var name = page[1].split("-demo")[0];
|
|
var title = document.querySelector('title').innerHTML;
|
|
document.getElementById('infoLink').setAttribute('href', '/articles/' + name + '.html');
|
|
document.getElementById('infoLink').innerHTML = title.split("demo")[0];
|
|
*/
|
|
</script>
|
|
<!-- * Simple Multi Listview -->
|
|
|
|
|
|
<div class="section full mb-2">
|
|
<div id="map"></div>
|
|
<div style="margin:6px 0 0 18px">
|
|
<a><ion-icon name='car' style="vertical-align: text-top;padding-top:2px;"></ion-icon> <span id="taketime"></span></a>
|
|
</div>
|
|
<div class="section-title">
|
|
<a>維修人員：<?php echo $repairer_name; ?></a>
|
|
</div>
|
|
<div class="section-title">
|
|
<a href="tel:<?php echo $repairer_phone_call_help; ?>">連絡電話：<?php echo $repairer_phone_call_help; ?></a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<!-- * App Capsule -->
|
|
|
|
<!-- 主頁頁尾 -->
|
|
<?php
|
|
include "include-footer.php";
|
|
#mysqli_close($link); #代表結束連線
|
|
?>
|
|
<!-- * 主頁頁尾 -->
|
|
|
|
<!-- 主頁頁尾按鈕 -->
|
|
<?php
|
|
# include "include-bottom-menu.php";
|
|
?>
|
|
<!-- * 主頁頁尾按鈕 -->
|
|
|
|
<!-- ///////////// Js Files //////////////////// -->
|
|
<!-- Jquery -->
|
|
<?php
|
|
include "include-jsfiles.php";
|
|
?>
|
|
|
|
</body>
|
|
|
|
</html>
|