130 lines
7.7 KiB
HTML
130 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
|
|
</head>
|
|
|
|
<style type="text/css">
|
|
html, body {
|
|
width: 100%; height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<body style="margin:0;padding:0;" oncontextmenu="return false;">
|
|
<div id="map" style="width:100%; height:100%;"> </div>
|
|
<!--yahoo map URL -->
|
|
<script type="text/javascript" src="https://map.yahooapis.jp/js/V1/jsapi?appid=dj00aiZpPVJuTHdOUTJnZjF2ciZzPWNvbnN1bWVyc2VjcmV0Jng9ZDQ-" ></script>
|
|
|
|
<script type="text/javascript">
|
|
//전역변수 선언
|
|
var lat;
|
|
var lon;
|
|
var lat0, lon0;
|
|
|
|
var map;
|
|
var icon;
|
|
var marker;
|
|
var lineColor = [];
|
|
var speed;
|
|
var gbFirst;
|
|
|
|
window.onload = function() {
|
|
map = new Y.Map("map");
|
|
|
|
//초기 위치(도쿄 역)WGS84
|
|
lat = 35.681382;//36.330826;
|
|
lon = 139.766084;//139.365312;
|
|
|
|
map.addControl(new Y.ZoomControl());
|
|
map.addControl(new Y.LayerSetControl()); //상단버튼
|
|
map.drawMap(new Y.LatLng(lat, lon), 16, Y.LayerSetId.NORMAL); //초기 일반지도로 설정
|
|
|
|
icon = new Y.Icon('data:image/png;base64,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',
|
|
{iconSize: new Y.Size(25,46)},
|
|
{iconAnchor: new Y.Point(13,46)});
|
|
marker = new Y.Marker(new Y.LatLng(lat, lon), {icon: icon});
|
|
map.addFeature(marker);
|
|
|
|
initLineColor();
|
|
|
|
}
|
|
|
|
//주행 궤적 속도별 색상 테이블
|
|
function initLineColor() {
|
|
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, car_speed, bFirst, bDistance) {
|
|
|
|
//var lat0, lon0;
|
|
|
|
lat0 = lat;
|
|
lon0 = lon;
|
|
|
|
lat = Latitude;
|
|
lon = Longitude;
|
|
|
|
gbFirst = bFirst;
|
|
|
|
//주행 궤적 표시
|
|
if ((bFirst == 0) && (bDistance == 0)) {
|
|
|
|
var points = [
|
|
[lat0, lon0],
|
|
[lat, lon]
|
|
];
|
|
|
|
speed = car_speed
|
|
|
|
// select line color by speed
|
|
var color_num = parseInt((car_speed - 9) / 2);
|
|
|
|
if (color_num < 0)
|
|
color_num = 0;
|
|
else if (color_num > 13)
|
|
color_num = 13;
|
|
|
|
if (gbFirst == 0)
|
|
{
|
|
// 예, var style = new Y.Style("ED1135", 5, 1); //색상, 굵기, 투명도
|
|
var style = new Y.Style(lineColor[color_num], 5, 1);
|
|
var latlngs = [
|
|
new Y.LatLng(lat0,lon0),
|
|
new Y.LatLng(lat,lon)
|
|
];
|
|
var polyline = new Y.Polyline(latlngs, {strokeStyle: style});
|
|
map.addFeature(polyline);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//마커를 이동
|
|
map.removeFeature(marker);
|
|
marker = new Y.Marker(new Y.LatLng(lat, lon), {icon: icon});
|
|
map.addFeature(marker);
|
|
|
|
//맵을 센터에 위치
|
|
map.panTo(new Y.LatLng(lat, lon), true);
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|