230 lines
8.0 KiB
HTML
230 lines
8.0 KiB
HTML
<!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
|
|
var latlng = new google.maps.LatLng(35.6585209,139.7453273);
|
|
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?v=3.45&key=AIzaSyA7ujCOO5j5VAx5Ae1_lvakQGmU0-GvArI®ion=JP&language=ja&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>
|