first commit
This commit is contained in:
230
project/fm_viewer/res/adt_caps/gmap.html
Normal file
230
project/fm_viewer/res/adt_caps/gmap.html
Normal file
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="viewport" content="initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
|
||||
<style type="text/css">
|
||||
.gm-style .controls {
|
||||
font-size: 28px; /* this adjusts the size of all the controls */
|
||||
|
||||
background-color: white;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-weight: 300;
|
||||
height: 1em;
|
||||
margin: 6px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
padding: 2px;
|
||||
width: 1em;
|
||||
}
|
||||
.gm-style .controls button {
|
||||
border: 0;
|
||||
background-color: white;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.gm-style .controls button:hover {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
.gm-style .controls.zoom-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
.gm-style .controls.zoom-control button {
|
||||
font: 0.85em Arial;
|
||||
margin: 1px;
|
||||
padding: 0;
|
||||
}
|
||||
html, body{
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#map_canvas
|
||||
{
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
function initZoomControl(map)
|
||||
{
|
||||
document.querySelector('.zoom-control-in').onclick = function() {
|
||||
map.setZoom(map.getZoom() + 1);
|
||||
};
|
||||
document.querySelector('.zoom-control-out').onclick = function() {
|
||||
map.setZoom(map.getZoom() - 1);
|
||||
};
|
||||
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
|
||||
document.querySelector('.zoom-control'));
|
||||
}
|
||||
function gob(e)
|
||||
{
|
||||
if(typeof(e)=='object')
|
||||
return(e);
|
||||
if(document.getElementById)
|
||||
return(document.getElementById(e));
|
||||
return(eval(e))
|
||||
}
|
||||
|
||||
var polyline;
|
||||
var carMarker;
|
||||
var lineColor = [];
|
||||
var color1;
|
||||
var center_last = null;
|
||||
|
||||
function initmap()
|
||||
{
|
||||
geocoder = new google.maps.Geocoder();
|
||||
// LONDON 51.5037856,-0.1169808
|
||||
// TOKYO 35.681382, 139.766084
|
||||
// 37.5665373,126.9776357
|
||||
var latlng = new google.maps.LatLng(37.5665373, 126.9776357);
|
||||
var mapTypeIds = [];
|
||||
for(var type in google.maps.MapTypeId) {
|
||||
mapTypeIds.push(google.maps.MapTypeId[type]);
|
||||
}
|
||||
|
||||
var myOptions = {
|
||||
zoom: 16,
|
||||
center: latlng,
|
||||
zoomControl:true,
|
||||
zoomControlOptions: {
|
||||
position: google.maps.ControlPosition.LEFT_CENTER
|
||||
},
|
||||
draggableCursor: 'default',
|
||||
draggingCursor: 'pointer',
|
||||
fullscreenControl: false,
|
||||
scaleControl: true,
|
||||
scrollwheel: true,
|
||||
controlSize: 26,
|
||||
mapTypeControl: true,
|
||||
mapTypeControlOptions: {
|
||||
mapTypeIds: [
|
||||
google.maps.MapTypeId.ROADMAP,
|
||||
google.maps.MapTypeId.SATELLITE
|
||||
]
|
||||
},
|
||||
styles: [{featureType: 'poi', stylers: [{visibility: 'off'}]}],
|
||||
streetViewControl: false};
|
||||
|
||||
map = new google.maps.Map(gob('map_canvas'),myOptions);
|
||||
initZoomControl(map);
|
||||
initLineColor();
|
||||
}
|
||||
|
||||
function initLineColor() { //14단계
|
||||
lineColor.push('#7FED11');
|
||||
lineColor.push('#35ED11');
|
||||
lineColor.push('#11ED3C');
|
||||
lineColor.push('#11ED7F');
|
||||
lineColor.push('#11EDC8');
|
||||
lineColor.push('#11C8ED');
|
||||
lineColor.push('#117FED');
|
||||
lineColor.push('#1135ED');
|
||||
lineColor.push('#3511ED');
|
||||
lineColor.push('#7F11ED');
|
||||
lineColor.push('#C811ED');
|
||||
lineColor.push('#ED11C8');
|
||||
lineColor.push('#ED117F');
|
||||
lineColor.push('#ED1135');
|
||||
}
|
||||
function setLatLag(Latitude, Longitude, speed, bFirst, bDistance) {
|
||||
|
||||
var center = new google.maps.LatLng(Latitude, Longitude);
|
||||
var l0 = center_last;
|
||||
center_last = center;
|
||||
|
||||
//주행 궤적 표시
|
||||
if ((bFirst == 0) && (bDistance == 0)) {
|
||||
|
||||
// select line color by speed
|
||||
var color_num = speed;
|
||||
|
||||
if (color_num < 0)
|
||||
color_num = 0;
|
||||
else if (color_num > 13)
|
||||
color_num = 13;
|
||||
|
||||
|
||||
if(color1 == color_num && polyline != null)
|
||||
{
|
||||
var path = polyline.getPath();
|
||||
path.push(center);
|
||||
//polyline.addLatLng([lat1, long1]);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
// draw line
|
||||
//
|
||||
polyline = new google.maps.Polyline({
|
||||
path: [l0,center],
|
||||
strokeColor: lineColor[color_num],
|
||||
strokeOpacity: 1.0,
|
||||
strokeWeight: 4
|
||||
});
|
||||
polyline.setMap(map);
|
||||
}
|
||||
|
||||
// 저장
|
||||
color1 = color_num;
|
||||
}
|
||||
else
|
||||
{
|
||||
polyline = null;
|
||||
}
|
||||
|
||||
if(!carMarker)
|
||||
{
|
||||
carMarker = new google.maps.Marker({ position: center,
|
||||
map: map,
|
||||
zIndex: 999,
|
||||
icon: 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAFS0lEQVRIiZWWaWxVRRTHf29vS2lL2QzG0rTUihRcalWIiEQDRIJUI2GLISTGiApqIiiIkCgRlA+WCNFGlkQQQmhAPtRgYg0Uy1KLgBawQilLwEKhLKWvb7l3xsy8+/C9ex+0/JOTuTPnzPnfc2bmzLiw4cwo+8htlACvAWVAAZBrKdqB08DvwMbBdbLRMTMBLleM0kHcMtJhOxBYAbwKZDq0ybgFVAEf5e+TlxzauxE3P5XUfRZYCxSpjrtXFr7iUrxDRkAgXYu41ka0+S/MpkNSdt2K+zsJvF5wQNb2mPhk2e3PMcA2oL/L5yfj+SlkTn8fz+ChCCGQUuo2LtGW44SrVhPds0NiRpXfNmDKkHq5p0fETaW6GQrsVJG6s/uSO28l6eOmxUhCQaKt53Srf8AXgH6DkF6/7kd+3UZ07VIhb91wW5FPfrBBnrATe+3EpqmbJYpURZo7N0YaudDC1RVvEz15FHf/+3FnZiMB0XEd0XYBT0EJ/rlf4hpdjssQbmP1AolpFFm+pjtSbh9oHM5zwC4gkDV5Nn0XrtaRXF4wFf+IkfSaMgehCBPSLEyDrqpKjMaD+BdVxlK/ZhGiRq0UYWDCsD/l7sSI3Y6IBeWmICDTMsmc9o52YoaCdNbvJn3SLEwpMU0zWYTEM2EGkSN12laNyYmzMH1pQvlSPu08TmKTMpVu39An8OYVEb1xjRvVW3APKkT405yklghfADkgn3DNDkyV/vsGIwoecStfyqedx7nGBnlakR/bvedmjCZ68azWnR01wG7uQPTkElxbK/GuqcYcVIg8clCZ5PUk4j56g/XK0ZFkv7UU6697LK6Z78WykN47PqdPT4hDytgIhfRkb0ExwuUj9/N1ZEx9847knvLZ+BZWYLp8yAcKdbaMUDiuD3WfapMrQN9w67+xycEgwpuGb3gZRjgSP25OFJXAQ48iPH49RxmKK22ImP2VbokNk+NAccfhBvpZGydys4Mzk55GhsPos5QCHcvm4/IHkKEu3KbQxNG/G5Ex4uM9iVjV15e7mk/RXrWRwIjSWJS3gmSMHU/WnPlIfX6tkimF7nd+V0H0txrtQ7g9mD/vxDgX25QXTRrj5zcOj514ZhpNUlIuJf2il1rp/dIUhGHizSsk/cVX8BYWIzN6/S/plvTORuDGNewxXMMfJ7Lua0T7VYKCCx/fZPM1ScBKuc6Zo3JVZ+tmMfCp0meOHcfA5asQ1qWgd2ti1bKJir5r+ScY+/XFJBsNNn/YyVbLfXM87Y6Ip/tASmqlpERKHg6fbqbr6GF8RcWQnZNEpCtUwi1ltDQTXLkMo36/8kGryb55QSoT3KuoW1JG/GP67U/1ADgA5KuOOyubjBfGk/bMGPylZUk/EG6oJ1JXS2RPDbKjQ08OweXPwnxwTHA9cQsBP6Uk3h5I6s4AvrdnxtN/AK6cHJ0a0d6u1zIREsRewVcVUZLuYiAI6B3o2NUi+bhsBsYBs5JsLl0GJXfARcnuCsNBSuJ57o5YYT7wpPU46BZdcH6NYEMKOxVtU7zjKJmK2CZtQrBYLWUKXZKYgug+waYmyQ2bW1UyG6w2NbHajSlku5SsTzGeJOclv1RK9ttcqjX5A5J/xkF8Fyy2HKREJzR/A5sSdF3AMUDdi1ftc+6FuN16P3XaFQJCdfBDC3RYlek8sNd66KfEvRArVAPf2gfPwq4NsTVUZ/YQcMR6a90RjnO85U6WyVCFRT/9O+CfN+DdGD+n1CPEYZ0C9xpxHPNUdBJu1sIXwP4tcGJLD0kVHOe4h6gHVql0TYT1ExMmqdp9N+jrEfgP4vQlN0VUoHYAAAAASUVORK5CYII='
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
carMarker.setPosition(center);
|
||||
}
|
||||
map.panTo(center);
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7ujCOO5j5VAx5Ae1_lvakQGmU0-GvArI®ion=JP&language=ko&callback=initmap"async defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
|
||||
<div style="display:none">
|
||||
<div class="controls zoom-control">
|
||||
<button class="zoom-control-in" title="Zoom In">+</button>
|
||||
<button class="zoom-control-out" title="Zoom Out">-</button>
|
||||
</div>
|
||||
<div class="controls maptype-control maptype-control-is-map">
|
||||
<button class="maptype-control-map"
|
||||
title="Show road map">Map</button>
|
||||
<button class="maptype-control-satellite"
|
||||
title="Show satellite imagery">Satellite</button>
|
||||
</div>
|
||||
<div class="controls fullscreen-control">
|
||||
<button title="Toggle Fullscreen">
|
||||
<div class="fullscreen-control-icon fullscreen-control-top-left"></div>
|
||||
<div class="fullscreen-control-icon fullscreen-control-top-right"></div>
|
||||
<div class="fullscreen-control-icon fullscreen-control-bottom-left"></div>
|
||||
<div class="fullscreen-control-icon fullscreen-control-bottom-right"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user