139 lines
8.4 KiB
HTML
139 lines
8.4 KiB
HTML
<html>
|
|
<head>
|
|
<script>
|
|
var polylines = [];
|
|
var carMarker = null;
|
|
var eMarker = null;
|
|
var mMarker = null;
|
|
var map = null;
|
|
const car_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=';
|
|
|
|
const trigger_e = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAkFBMVEX///8AAADwhifrXRvjJwnrXhvjJQnlMQ3sbiHudSPpUxjnRRPmPRHsbSDwhSjmNg7whSjmORDscCHwhSjmPRDtciLiHQbkQA3oaRXlPw3z6S3z7C7vVibtHyPwjCnxtSvz3i3xmirnZBTiKwnwzijiKAjkNgvy4izqhBry3yvqfxnqgBniJgjy3CvqexjiIwcw+MjgAAAAFnRSTlMAAAzO/s/++5Z04O/2nAj6BPiOAvaHvik/1AAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMpJREFUOMul0dcSgjAQhWEWpClNwSMQBBsq1vd/O0HaKG3E/26T72In4bg0Xpig0UTguTIRK7fRCmIFJM9njXxPqgBc1pKLX0GwLgvHgzAv6gSDOwyCKG8ztGQ0Hvy/ZPEO26EdgpHgr+/etYFdDeT9oXl/2MsVUIA463jKbk7H9wAoFSB1OkvTcM7AGVo2TVWqQR4vxwljSSzzxcE3IB0Xxq7QqQsY5u1+v5lGJyAFjwcU6gbW/PmcWz2AFsCC+oDtOHYvoOWSPsELzMo/nFu3LQ8AAAAASUVORK5CYII=';
|
|
const trigger_m = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAWlBMVEX///8AAACXQBWXQBWXQBWXQBWXQBWXQBWXQBWXQBWiRReuSRjsYyDyZSH1jFn0gkv////zby/3n3T7z7r94tX0eD35spD97OP4qIL5vJ7bXB7nYCC5ThqzTBl5ufEpAAAACXRSTlMAABC/j2DP74BZG8vxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA7ElEQVQ4y6XS4Y6CMBAEYNqqsOC2RUFF8P1f82ZRpDm2JJebX4V+mQ20RYFYR0qcLZY4qptNanJfQPWZNznXtIKGlTR/Bd778N4JWCogIq3st7LKgIuAyw64CrhmQRdjz9zPCxXc7vHB/Ij3Ww4MsWPu4pAFATMwIWQBYwYmcB5gBibsgCBfGHYAZmDCHhgiJmSA9/hLrfc4j149rP/dB3pu95+0gsNykUfZGZenwxeYo5OcaBIw0Wl+PJoVvGNLqRiptJ8Xv4GppGKiyuSAVCQFW4CK12stUAAqkgIFoCIp0IAtkwINmCopmMEP+eggUwlpWX8AAAAASUVORK5CYII=';
|
|
|
|
function initmap()
|
|
{
|
|
// !4d!16
|
|
map = new routo.maps.Map("map", {
|
|
center: { lat: 37.4871286, lng: 127.0212453 }, // 지도 초기 위치
|
|
zoom: 18, // 지도 로딩 시 최초 표시 레벨
|
|
blockRotation: true, // 지도 회전 제한
|
|
zoomControl: true,
|
|
});
|
|
|
|
// drawPaths([[{"lat":37.486782, "lng":127.021142},{"lat":37.586787, "lng":127.121133},{"lat":37.596788, "lng":127.291133}]]);
|
|
// moveToMap(37.486782,127.021142);
|
|
// clearPath();
|
|
}
|
|
function moveToMap(Latitude, Longitude) {
|
|
|
|
var center = {lat: Latitude,lng: Longitude};
|
|
map.setCenter(center);
|
|
if(!carMarker)
|
|
{
|
|
carMarker = new routo.maps.Marker({ position: {
|
|
lat: Latitude,
|
|
lng: Longitude},
|
|
icon: {url : car_icon},
|
|
map: map,
|
|
});
|
|
} else {
|
|
carMarker.setPosition(center);
|
|
}
|
|
}
|
|
|
|
function clearPath()
|
|
{
|
|
if(polylines.length > 0)
|
|
{
|
|
for(var idx in polylines) {
|
|
var polyline = polylines[idx]
|
|
polyline.setMap(null);
|
|
}
|
|
polylines = []
|
|
}
|
|
if(carMarker)
|
|
{
|
|
carMarker.setMap(null);
|
|
carMarker = null;
|
|
}
|
|
if(eMarker) {
|
|
eMarker.setMap(null);
|
|
eMarker = null;
|
|
}
|
|
if(mMarker) {
|
|
mMarker.setMap(null);
|
|
mMarker = null;
|
|
}
|
|
}
|
|
function clearCarMarker()
|
|
{
|
|
if(carMarker)
|
|
{
|
|
carMarker.setMap(null);
|
|
carMarker = null;
|
|
}
|
|
}
|
|
|
|
function drawEMarkers(Latitude, Longitude) {
|
|
if(!eMarker)
|
|
{
|
|
eMarker = new routo.maps.Marker({ position: {
|
|
lat: Latitude,
|
|
lng: Longitude},
|
|
icon: {url : trigger_e},
|
|
map: map,
|
|
});
|
|
} else {
|
|
eMarker.setPosition({lat: Latitude,lng: Longitude});
|
|
}
|
|
}
|
|
function drawMMarkers(Latitude, Longitude) {
|
|
if(!mMarker)
|
|
{
|
|
eMarker = new routo.maps.Marker({ position: {
|
|
lat: Latitude,
|
|
lng: Longitude},
|
|
icon: {url : trigger_m},
|
|
map: map,
|
|
});
|
|
} else {
|
|
mMarker.setPosition({lat: Latitude,lng: Longitude});
|
|
}
|
|
}
|
|
|
|
function drawPaths(pathArray)
|
|
{
|
|
var first = null;
|
|
clearPath();
|
|
for(var idx in pathArray) {
|
|
var path = pathArray[idx];
|
|
if(first == null) {
|
|
first = path[0];
|
|
}
|
|
if(path.length > 1) {
|
|
polyline = new routo.maps.Polyline({map: map,
|
|
path: path,
|
|
strokeColor: "#FF0000",
|
|
strokeOpacity: 0.7,
|
|
strokeWeight: 4
|
|
});
|
|
polylines.push(polyline);
|
|
}
|
|
}
|
|
if(first != null)
|
|
{
|
|
//alert(first["lat"]);
|
|
var center = {lat: first["lat"],lng: first["lng"]};
|
|
map.panTo(center);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script src="https://api.routo.com/v2/maps/map?key=ba001cb7-cb2b-4859-9c44-ee87767f162f&callback=initmap"></script>
|
|
</head>
|
|
<body oncontextmenu="return false;" style="width: 100%; height: 100%; padding : 0;margin: 0;">
|
|
<div id="map" class="map"></div>
|
|
</body>
|
|
</html>
|