Код: Выделить всё
<!DOCTYPE html>
<html>
<head>
<title>HINO 300 - В219СЕ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#controls{
font-family:arial;
font-size:12px;
text-transform: uppercase;
font-weight:bold;
position:absolute;
top:0px;
left:0px;
margin:2px;
padding:3px;
background:white;
-webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.25);
box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.25);
opacity:0.8;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var myMap;
var myData = [
{date: '07.12.2022',type: 'path',name: 'Фактический путь',color: "#0000FF",namecolor: 'blue',data: [[ 48.46219500, 135.10121167],[ 48.46241167, 135.10164167],[ 48.46284667, 135.10200000],[ 48.46327000, 135.10128167],[ 48.46383167, 135.10190500],[ 48.46390167, 135.10196667],[ 48.46398500, 135.10218167],[ 48.46375500, 135.10264667],[ 48.46304667, 135.10234000],[ 48.46251667, 135.10171500],[ 48.46204667, 135.10116667],[ 48.46126667, 135.10037500],[ 48.46084167, 135.10104000],[ 48.46086500, 135.10137500],[ 48.46093000, 135.10075000],[ 48.46029667, 135.09963167],[ 48.45988667, 135.09897667],[ 48.45963500, 135.09820500],[ 48.46083667, 135.09728000],[ 48.46191500, 135.09669167],[ 48.46541667, 135.09625500],[ 48.46945667, 135.09560667],[ 48.47146667, 135.09505667],[ 48.47353167, 135.09419167],[ 48.47537667, 135.09279667],[ 48.47775167, 135.09079000],[ 48.47862000, 135.09019500],[ 48.47863667, 135.09018167],[ 48.47802667, 135.08902667],[ 48.47721167, 135.08766667],[ 48.47816667, 135.08624000],[ 48.47835667, 135.08588667],[ 48.47895000, 135.08504167],[ 48.47964167, 135.08405167],[ 48.48019167, 135.08334000],[ 48.48067000, 135.08261667],[ 48.47948167, 135.08057167],[ 48.47840667, 135.07863667],[ 48.47786667, 135.07737000],[ 48.48008167, 135.07406667],[ 48.48138000, 135.07233167],[ 48.48237167, 135.07368000],[ 48.48300500, 135.07470000],[ 48.48403167, 135.07635500],[ 48.48503500, 135.07796000],[ 48.48582667, 135.07922167],[ 48.48650667, 135.08039167],[ 48.48744667, 135.08192167],[ 48.48760167, 135.08246667],[ 48.48813500, 135.08337000],[ 48.48861500, 135.08404167],[ 48.48917667, 135.08376667],[ 48.49002167, 135.08379167],[ 48.49015167, 135.08362167],[ 48.49016667, 135.08378167],[ 48.49004667, 135.08389167],[ 48.49006000, 135.08399167],[ 48.49027667, 135.08380500],[ 48.49020167, 135.08394500],[ 48.49022167, 135.08358167],[ 48.49392167, 135.10467500],[ 48.39661667, 135.10727167],[ 48.39014667, 135.10940167],[ 48.39037000, 135.10917667],[ 48.36688000, 135.03200667],[ 48.36692667, 135.03190667],[ 48.36568667, 135.02826167],[ 48.36512500, 135.02584500],[ 48.36479667, 135.02338500],[ 48.36446667, 135.02109167],[ 48.36404667, 135.01826500],[ 48.36391167, 135.01407667],[ 48.36254500, 135.01055500],[ 48.36053167, 135.00940167],[ 48.35892167, 135.00871167],[ 48.35598167, 135.00702000],[ 48.35502667, 135.00855500],[ 48.35460000, 135.01037000],[ 48.35334667, 135.01061167],[ 48.35298000, 135.01251667],[ 48.35278000, 135.01304667],[ 48.35259500, 135.01341000],[ 48.36629667, 135.05058667],[ 48.36699500, 135.05267500],[ 48.36927667, 135.05495500],[ 48.37052667, 135.05970000],[ 48.36966167, 135.06289667],[ 48.36871000, 135.06568167],[ 48.36918500, 135.06962667],[ 48.37127167, 135.07033167],[ 48.37338667, 135.07103667],[ 48.37522167, 135.07165000],[ 48.37719500, 135.07259500],[ 48.37895167, 135.07289167],[ 48.38022500, 135.07357167],[ 48.38097000, 135.07626000],[ 48.38210667, 135.07855167],[ 48.38394500, 135.08169167],[ 48.38617167, 135.08432000],[ 48.38831167, 135.08580000],[ 48.39079667, 135.08747667],[ 48.39674667, 135.09415667],[ 48.39837667, 135.09696000],[ 48.39821667, 135.09737500],[ 48.39819667, 135.09783667],[ 48.39880000, 135.09806667],[ 48.39939667, 135.09831667],[ 48.40017667, 135.09863500],[ 48.40136667, 135.09916000],[ 48.40082167, 135.10044167],[ 48.40126667, 135.10080667],[ 48.40168500, 135.10097500],[ 48.40199167, 135.10120167],[ 48.40197667, 135.10125500],[ 48.40187667, 135.10104167],[ 48.40102667, 135.10073167],[ 48.40077000, 135.10051667],[ 48.40132167, 135.09939500],[ 48.40071667, 135.09885667],[ 48.39895667, 135.09814667],[ 48.39847167, 135.09792167],]},{date: '07.12.2022',type: 'route',name: 'Путевой лист 1194',color: "#FF0000",namecolor: 'red',data: ['г. Хабаровск,680007, г. Хабаровск, ул. Волочаевская, 8','г. Хабаровск,ул. Ким Ю Чена, 44','г. Хабаровск,ул Промышленная, дом 19','г. Хабаровск,ул Космическая, дом 9-б, кв. 78','г. Хабаровск,пер Инский, дом 9, кв. 29','г. Хабаровск,ул Краснореченская, дом 167, кв. 186','г. Хабаровск,г. Хабаровск, ул. Суворова, 25','г. Хабаровск,ул Краснореченская, дом 42, кв. 5','г. Хабаровск,ул Ворошилова, дом 21, кв. 29','г. Хабаровск,ул Панфиловцев, дом 47, кв. 62','г. Хабаровск,ул Малиновского, дом 37, кв. 72','г. Хабаровск,ул Автобусная, дом 14-а, кв. 33','г. Хабаровск,ул Автобусная, дом 2а, кв. 1','г. Хабаровск,пер Кадровый, дом 3, кв. 96','г. Хабаровск,пер Кедровый, дом 3, кв. 85','г. Хабаровск,р-н Хабаровский, с Краснореченское, ул Весенняя, дом 12','г. Хабаровск,ул Герцена, дом 1, кв. 15','г. Хабаровск,ул Краснореченская, дом 81, кв. 64','г. Хабаровск,ул Калинина, дом 135, кв. 114','г. Хабаровск,пер Кавалерийский, дом 2-а','г. Хабаровск,ул. Волочаевская, 8',]},
/*
{
date: '02.06.2017',
type: 'path',
name: 'Фактический путь',
color: "#0000ff",
namecolor: 'red',
data: [[48.46371500, 135.10156000], [48.46371500, 135.10155667], [48.46356167, 135.10134667]]
},
{
date: '02.06.2017',
type: 'route',
name: 'Путевой лист 1',
color: "#006400",
namecolor: 'darkGreen',
data: ['г. Хабаровск, ул. Волочаевская, 8', 'г. Хабаровск,ул Оборонная, дом 8б, кв. 26', 'г. Хабаровск,пер Молдавский, дом 7, кв. 49']
},
*/
];
ymaps.ready(function () {
myMap = new ymaps.Map('map', {center: [48.461, 135.100], zoom: 16, controls:[]});
for (var i = 0; i < myData.length; i++) {
if (myData[i].type == 'path'){
poliline = new ymaps.Polyline(myData[i].data, {balloonContent: myData[i].name}, {
balloonCloseButton: true,
strokeColor: myData[i].color,
strokeWidth: 2,
strokeOpacity: 1,
visible:true
});
myMap.geoObjects.add(poliline);
myMap.setBounds(poliline.geometry.getBounds());
$('#controls').append('<div class="var">'+'Дата — ' + myData[i].date+'</div>');
$('#controls').append('<div class="var" style="color:'+myData[i].color+';">'+myData[i].name+' — <span>'+Math.round(getDistance(poliline, myMap) / 1000)+' км.</span></div>');
} else if (myData[i].type == 'route'){
var i1 = i;
ymaps.route(myData[i1].data, {mapStateAutoApply: true}).then(function (route) {
route.getPaths().options.set({
balloonContentBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
strokeWidth: 2,
opacity: 0.8,
visible:true
});
var points = route.getWayPoints(),lastPoint = points.getLength() - 1;
points.options.set('preset', 'islands#'+myData[i1].namecolor+'StretchyIcon');
//points.get(0).properties.set('iconContent', 'Точка отправления');
//points.get(lastPoint).properties.set('iconContent', 'Точка прибытия');
route.getPaths().options.set('strokeColor',myData[i1].color);
myMap.geoObjects.add(route);
$('#controls').append('<div class="var" style="color:'+myData[i1].color+'">'+myData[i1].name+' — <span>'+Math.round(route.getLength() / 1000)+' км.</span></div>');
});
}
}
});
function getDistance(polyline, map) {
var geometry = polyline.geometry,
points = geometry.getCoordinates(),
coordSystem = map.options.get('projection').getCoordSystem(),
distance = 0;
for (var i = 0, k = geometry.getLength() - 1; i < k; i++) {
distance += coordSystem.getDistance(points[i], points[i + 1]);
}
return distance;
}
</script>
<div id="controls">
</div>
</body>
</html>