Первый вариант маршрутов
This commit is contained in:
parent
5f1e140223
commit
b3a288465a
|
|
@ -9,7 +9,7 @@ class IndexController extends Controller
|
|||
static function actionIndex()
|
||||
{
|
||||
self::addScript('/js/jquery-2.1.0.min.js');
|
||||
self::addScript('http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU&mode=release');
|
||||
self::addScript('http://api-maps.yandex.ru/2.0-stable/?load=package.full&lang=ru-RU&mode=release');
|
||||
self::addScript('/js/main.js?ver='.App::getConfig('version'));
|
||||
self::addScript('/js/bootstrap.min.js');
|
||||
self::addStyle('/css/style.css?ver='.App::getConfig('version'));
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
<div id="map"></div>
|
||||
<div id="routeWindow" class="popover fade in" style="display: none; position: absolute; top: 50px; right: 7px; left: auto;">
|
||||
<h3 class="popover-title">Мой маршрут</h3>
|
||||
<div class="popover-content">
|
||||
<ul id="wayPoints"></ul>
|
||||
<button class="btn btn-default" onclick="buildRoute()"><span class="glyphicon glyphicon-send"></span> Проложить</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
|
|
@ -14,7 +21,7 @@
|
|||
|
||||
</td>
|
||||
<td>
|
||||
<!-- <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-align-justify"></span> Маршрут</button>-->
|
||||
<button class="btn btn-default" type="button" onclick="$('#routeWindow').toggle(200)"><span class="glyphicon glyphicon-align-justify"></span> Маршрут</button>
|
||||
<button class="btn btn-default" type="button" onclick="showMeOnTheMap()"><span class="glyphicon glyphicon-screenshot"></span> Я на карте</button>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
|
|
|
|||
|
|
@ -53,19 +53,16 @@ function init() {
|
|||
myMap.geoObjects.add(im);
|
||||
}
|
||||
|
||||
function getPoints()
|
||||
function constructPoint(data)
|
||||
{
|
||||
$.ajax({
|
||||
url: "/json/points/",
|
||||
success: function(data){
|
||||
for(var k in data) {
|
||||
id = data[k]['id'];
|
||||
id = data['id'];
|
||||
points[id] = new ymaps.Placemark(
|
||||
[data[k]['lat'], data[k]['lng']], {
|
||||
hintContent: data[k]['name'],
|
||||
[data['lat'], data['lng']], {
|
||||
hintContent: data['name'],
|
||||
id: id
|
||||
},{
|
||||
iconImageHref: data[k]['categoryIcon'],
|
||||
},
|
||||
{
|
||||
iconImageHref: data['categoryIcon'],
|
||||
iconImageSize: [32, 37],
|
||||
iconImageOffset: [-16, -33],
|
||||
openEmptyBalloon: true,
|
||||
|
|
@ -75,7 +72,17 @@ function getPoints()
|
|||
points[id].events.add('click', function (e) {
|
||||
showInfo(e.get('target').properties.get('id'));
|
||||
});
|
||||
myMap.geoObjects.add(points[id]);
|
||||
|
||||
return points[id];
|
||||
}
|
||||
|
||||
function getPoints()
|
||||
{
|
||||
$.ajax({
|
||||
url: "/json/points/",
|
||||
success: function(data){
|
||||
for(var k in data) {
|
||||
myMap.geoObjects.add(constructPoint(data[k]));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -94,6 +101,9 @@ function showInfo(id)
|
|||
description = '<div class="infoCard">' +
|
||||
'<h3>' + data.name + '</h3>' +
|
||||
'<img src="' + data.img + '" />' +
|
||||
'<button type="button" class="btn btn-default btn-xs" onclick="addToRoute(' + id + ')">' +
|
||||
'<span class="glyphicon glyphicon-plus"></span> Добавить в маршрут' +
|
||||
'</button><br/>' +
|
||||
data.description +
|
||||
' <a href="' + data.source + '" target="blank">Подробнее...</a></div>'
|
||||
points[id].properties.set('balloonContent', description);
|
||||
|
|
@ -161,30 +171,20 @@ function addPoint()
|
|||
lng: $('#addPointLng').val()
|
||||
},
|
||||
success: function(data) {
|
||||
id = data;
|
||||
points[id] = new ymaps.Placemark(
|
||||
[$('#addPointLat').val(), $('#addPointLng').val()], {
|
||||
hintContent: $('#addPointName').val(),
|
||||
id: id
|
||||
}, {
|
||||
iconImageHref: categories[$('#addPointCategoryId').val()].icon,
|
||||
iconImageSize: [32, 37],
|
||||
iconImageOffset: [-16, -33],
|
||||
openEmptyBalloon: true,
|
||||
balloonCloseButton: false
|
||||
});
|
||||
|
||||
points[id].events.add('click', function(e) {
|
||||
showInfo(e.get('target').properties.get('id'));
|
||||
});
|
||||
|
||||
var balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false});
|
||||
balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false});
|
||||
setTimeout(function() {
|
||||
balloon.close();
|
||||
}, 3000);
|
||||
|
||||
obj = {};
|
||||
obj.id = data;
|
||||
obj.name = $('#addPointName').val();
|
||||
obj.lat = $('#addPointLat').val();
|
||||
obj.lng = $('#addPointLng').val();
|
||||
obj.categoryIcon = categories[$('#addPointCategoryId').val()].icon;
|
||||
|
||||
setTimeout(function(){
|
||||
myMap.geoObjects.add(points[id]);
|
||||
myMap.geoObjects.add(constructPoint(obj));
|
||||
}, 3000);
|
||||
|
||||
$('#addPointModal').modal('hide');
|
||||
|
|
@ -219,3 +219,35 @@ function addPoint()
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
function buildRoute()
|
||||
{
|
||||
wayPoints = Array();
|
||||
|
||||
$('#wayPoints li').each(function(i, el)
|
||||
{
|
||||
wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates());
|
||||
});
|
||||
|
||||
ymaps.route(wayPoints, {
|
||||
mapStateAutoApply: true
|
||||
}).then(function(route) {
|
||||
// console.log(route.getPaths());
|
||||
route.options.set({
|
||||
// в балуне выводим только информацию о времени движения с учетом пробок
|
||||
balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
|
||||
strokeColor: '9000ffff',
|
||||
opacity: 0.9
|
||||
});
|
||||
|
||||
myMap.geoObjects.add(route);
|
||||
});
|
||||
}
|
||||
|
||||
function addToRoute(id)
|
||||
{
|
||||
$('#wayPoints').append('<li pointid="'+id+'">' + points[id].properties.get('hintContent') + '</li>');
|
||||
myMap.balloon.close();
|
||||
$('#routeWindow').show(200);
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue