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.
231 lines
12 KiB
231 lines
12 KiB
<html>
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<title>工地地圖</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="map.css"/>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<link rel="stylesheet" href="jsgrid.css">
|
|
<link rel="stylesheet" href="jsgrid-theme.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map" style="height: 100%"></div>
|
|
<!-- Jquery -->
|
|
<script src="js/lib/jquery-3.4.1.min.js"></script>
|
|
<!-- Bootstrap-->
|
|
<script src="js/lib/popper.min.js"></script>
|
|
<script src="js/lib/bootstrap.min.js"></script>
|
|
<!-- Ionicons -->
|
|
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
|
|
|
|
<script src="js/base.js"></script>
|
|
<script src="../da/chart.js/Chart.js"></script>
|
|
<script src="js/jsgrid.js"></script>
|
|
<script>
|
|
// This example displays a marker at the center of Australia.
|
|
// When the user clicks the marker, an info window opens.
|
|
const urll = location.href;
|
|
const wurl = urll.split('phb')[0];
|
|
function initMap() {
|
|
var pointURL = wurl + 'phb/map/worksite.php';
|
|
var points=[];
|
|
var currentInfoWindow = null;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: pointURL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log(result);
|
|
if (result.length > 0) {
|
|
for (i = 0; i < result.length; i++) {
|
|
var obj={};
|
|
var longitude= Number(result[i]['longitude']);
|
|
var latitude = Number(result[i]['latitude']);
|
|
|
|
var buildcompany = result[i]['buildcompany'];
|
|
var facilitynum = result[i]['facilitynum'];
|
|
var address = result[i]['address'];
|
|
var process = result[i]['process'];
|
|
var status = result[i]['status'];
|
|
var marchintotime = result[i]['marchintotime'];
|
|
var estimatedcompletiontime = result[i]['estimatedcompletiontime'];
|
|
|
|
var installschedule=result[i]['installschedule'];
|
|
var htmlds='';
|
|
for (j = 0; j < installschedule.length; j++) {
|
|
var issue_time = installschedule[j]['issue_time'];
|
|
var process = installschedule[j]['process'];
|
|
var memo = installschedule[j]['memo'];
|
|
var fisrtdot='';
|
|
if(j==0){
|
|
fisrtdot="dot bg-warning";
|
|
}else{
|
|
fisrtdot="dot";
|
|
}
|
|
htmlds +=
|
|
'<div class="item">' +
|
|
'<div class="'+fisrtdot+'"></div>'+
|
|
'<span class="time" style="padding-right:4px;">' +issue_time+ '</span> '+
|
|
'<div class="content">' +
|
|
'<h4 class="title" style="margin-bottom:-2px;">' +process+ '</h4>'+
|
|
'<div class="text"> </div>'+
|
|
'</div>'+
|
|
'</div>';
|
|
}
|
|
|
|
obj['lat']=latitude;
|
|
obj['lng']=longitude;
|
|
var icon = {
|
|
url: 'icon/worksite.png',
|
|
//scaledSize: new google.maps.Size(52, 50), // scaled size
|
|
scaledSize: new google.maps.Size(32.4, 31.2), // scaled size
|
|
origin: new google.maps.Point(0,0), // origin
|
|
anchor: new google.maps.Point(0, 0) // anchor
|
|
};
|
|
const marker = new google.maps.Marker({
|
|
position: obj,
|
|
map,
|
|
title:buildcompany,
|
|
icon:icon
|
|
});
|
|
|
|
const contentString =
|
|
'<div class="container">' +
|
|
'<div class="row">' +
|
|
'<div class="col-md-12">' +
|
|
'<div id="choosecontent" style="height: 330px;width: 400px">' +
|
|
'<div class="card card-primary card-outline mt-05">' +
|
|
'<div class="card-body box-profile">' +
|
|
'<ul class="list-group list-group-unbordered mb-3 lead">' +
|
|
'<li class="list-group-item">' +
|
|
'<b>建設公司</b> <a class="float-right">' +buildcompany+ '</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>梯數</b> <a class="float-right">' + facilitynum + '</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>地址</b> <a class="float-right">' + address + '</a> ' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>工地狀態</b> <a class="float-right">' + status + '</a> ' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>進場日</b> <a class="float-right">' +marchintotime+ '</a>' +
|
|
'</li>' +
|
|
//'<li class="list-group-item">' +
|
|
//'<b>預計完工日</b> <a class="float-right">' +estimatedcompletiontime+ '</a>' +
|
|
//'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b>工地進度</b>' +
|
|
'<div class="wide-block">\n' +
|
|
'<div class="timeline timed" id="timelineschduce">' + htmlds +
|
|
'</div>' +
|
|
'</div>'+ //end
|
|
'</li>' +
|
|
'</ul>' +
|
|
'</div>' +
|
|
'</div>';
|
|
'</div>' +
|
|
'</div>'+
|
|
"</div>" +
|
|
"</div>";
|
|
|
|
const infowindow = new google.maps.InfoWindow({
|
|
content: contentString
|
|
});
|
|
clickMarker(marker,infowindow);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
function clickMarker(marker,infowindow){
|
|
marker.addListener("click", (e) => {
|
|
if (currentInfoWindow != null) {
|
|
currentInfoWindow.close();
|
|
}
|
|
infowindow.open({
|
|
anchor: marker,
|
|
map,
|
|
shouldFocus: false,
|
|
});
|
|
currentInfoWindow = infowindow;
|
|
});
|
|
}
|
|
//const uluru = { lat:24.9966186 , lng: 121.1594333 };
|
|
//const uluru = { lat:23.974003045820343 , lng: 120.97981583669126 };
|
|
const uluru = { lat:23.633310942708295, lng: 120.77153763992857 };
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 8,
|
|
center: uluru,
|
|
});
|
|
|
|
const eledata=document.createElement("div");
|
|
eledata.className='gm-style-mtc';
|
|
eledata.style.cssText="float: left; position: relative;";
|
|
const fenbutu = document.createElement("button");
|
|
fenbutu.textContent = "分佈圖";
|
|
fenbutu.style.cssText="background: none padding-box rgb(255, 255, 255);border: 0px; margin-left: 10px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;";
|
|
eledata.appendChild(fenbutu);
|
|
|
|
const eledata1=document.createElement("div");
|
|
eledata1.className='gm-style-mtc xia';
|
|
eledata1.style.cssText="width:100px;margin-left: 10px;margin-top: 5px; display:none";
|
|
eledata.appendChild(eledata1);
|
|
|
|
const dainti = document.createElement("button");
|
|
dainti.textContent = "電梯";
|
|
dainti.style.cssText="background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;";
|
|
|
|
const baoyangyuan = document.createElement("button");
|
|
baoyangyuan.textContent = "保養員";
|
|
baoyangyuan.style.cssText="background: none padding-box rgb(255, 255, 255);border: 0px;margin-top: 2px; text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;";
|
|
const gongchang = document.createElement("button");
|
|
gongchang.textContent = "工廠";
|
|
gongchang.style.cssText="background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;";
|
|
|
|
const gongdi = document.createElement("button");
|
|
gongdi.textContent = "工地";
|
|
gongdi.style.cssText="background: none padding-box rgb(255, 255, 255); border: 0px; margin-top: 2px;text-transform: none; -webkit-appearance: none; position: relative; cursor: pointer; user-select: none; direction: ltr; overflow: hidden; text-align: center; height: 40px;width:70px; vertical-align: middle; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; font-size: 18px; border-bottom-left-radius: 2px; border-top-left-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; min-width: 36px; font-weight: 500;";
|
|
|
|
|
|
eledata1.appendChild(dainti);
|
|
eledata1.appendChild(baoyangyuan);
|
|
eledata1.appendChild(gongchang);
|
|
eledata1.appendChild(gongdi);
|
|
map.controls[google.maps.ControlPosition.LEFT_TOP].push(eledata);
|
|
|
|
fenbutu.onmouseover = (() => {
|
|
eledata1.style.display = "block";
|
|
})
|
|
eledata1.onmouseleave = (() => {
|
|
eledata1.style.display = "none";
|
|
})
|
|
dainti.addEventListener('click', () => {
|
|
window.location.href="tw.html";
|
|
});
|
|
baoyangyuan.addEventListener('click', () => {
|
|
window.location.href="person.html";
|
|
});
|
|
gongchang.addEventListener('click', () => {
|
|
window.location.href="factory.html";
|
|
});
|
|
gongdi.addEventListener('click', () => {
|
|
window.location.href="worksite.html";
|
|
});
|
|
|
|
|
|
}
|
|
|
|
window.initMap = initMap;
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" async defer></script>
|
|
</body>
|
|
</html>
|
|
|