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.
250 lines
12 KiB
250 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/person.php';
|
|
//var pointURL = wurl + 'phbbackup/map/person.php';
|
|
var points=[];
|
|
var currentInfoWindow = null;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: pointURL,
|
|
success: function (msg) {
|
|
var result = eval("(" + msg + ")");
|
|
console.log('結果');
|
|
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 repairername=result[i]['name'];
|
|
var repairertel=result[i]['tel'];
|
|
var guiji=result[i]['guiji'];
|
|
obj['lat']=latitude;
|
|
obj['lng']=longitude;
|
|
|
|
var icon = {
|
|
url: 'icon/person.png',
|
|
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:repairername,
|
|
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">' +
|
|
'<li class="list-group-item">' +
|
|
'<b style="font-size: 20px;font-weight: bolder">保養員</b> <a class="float-right" style="font-size: 20px;font-weight: bolder">' + repairername + '</a>' +
|
|
'</li>' +
|
|
'<li class="list-group-item">' +
|
|
'<b style="font-size: 20px;font-weight: bolder">保養員聯繫電話</b> <a class="float-right" style="font-size: 20px;font-weight: bolder" href="tel:' + repairertel + '" >' + repairertel + '</a> ' +
|
|
'</li>' +
|
|
'</ul>' +
|
|
|
|
'</div>' +
|
|
'<div id="map1" style="height: 200px;width:100%;"></div>'+
|
|
'</div>';
|
|
|
|
|
|
'</div>' +
|
|
'</div>'+
|
|
"</div>" +
|
|
"</div>";
|
|
const infowindow = new google.maps.InfoWindow({
|
|
content: contentString
|
|
});
|
|
|
|
clickMarker(marker,guiji,infowindow);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
function clickMarker(marker,guijidata,infowindow){
|
|
infowindow.close();
|
|
marker.addListener("click", (e) => {
|
|
if (currentInfoWindow != null) {
|
|
currentInfoWindow.close();
|
|
}
|
|
infowindow.open({
|
|
anchor: marker,
|
|
map,
|
|
shouldFocus: false,
|
|
});
|
|
currentInfoWindow = infowindow;
|
|
console.log('軌跡坐標');
|
|
console.log(guijidata);
|
|
guiji(guijidata);
|
|
});
|
|
}
|
|
|
|
|
|
//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;
|
|
|
|
function guiji(guiji){
|
|
//初始化地圖
|
|
var len=parseInt(guiji.length-1);
|
|
console.log('個數');
|
|
console.log(len);
|
|
console.log(guiji);
|
|
|
|
if(len>0){
|
|
var origin = new google.maps.LatLng(guiji[0].lat, guiji[0].lng);//起點
|
|
var destination = new google.maps.LatLng(guiji[len].lat, guiji[len].lng);//終點
|
|
const waypts = [];
|
|
for (let i = 1; i < guiji.length-1; i++) {
|
|
var location=new google.maps.LatLng(guiji[i].lat, guiji[i].lng);
|
|
waypts.push({
|
|
location: location,
|
|
stopover: false,
|
|
});
|
|
}
|
|
var mapOptions = {
|
|
zoom: 14,
|
|
center: origin
|
|
}
|
|
var map = new google.maps.Map(document.getElementById('map1'), 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['WALKING'],
|
|
waypoints:waypts
|
|
};
|
|
var directionsService = new google.maps.DirectionsService();
|
|
directionsService.route(request, function(response, status) {
|
|
if (status == 'OK') {
|
|
directionsRenderer.setDirections(response);
|
|
}
|
|
});
|
|
}
|
|
}else{
|
|
var origin = new google.maps.LatLng(25.03, 121.31);//起點
|
|
var mapOptions = {
|
|
zoom: 14,
|
|
center: origin
|
|
}
|
|
var map = new google.maps.Map(document.getElementById('map1'), mapOptions);
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCJp-JIcYIyeR_QNpREvsepApvVytZWOs&callback=initMap" async defer></script>
|
|
</body>
|
|
</html>
|
|
|