Клуб API Карт

Внешняя ссылка на маршрут

Пост в архиве.

http://sarapul.ru/bus/scheme.php

Вот страница с картой.

Сейчас чтобы посмотреть нужный маршрут нужно вначале зайти на страницу, а затем в меню выбрать нужный маршрут, а как можно сделать так, чтобы он сразу открывался, открыв ссылку вида.

http://sarapul.ru/bus/scheme.php#root2 

или

http://sarapul.ru/bus/scheme.php#bus2   

 Сам блок с маршрутом выглядет так: 

YMaps.jQuery("#bus2").bind('click', function () {
map.removeAllOverlays(
map.setCenter(new YMaps.GeoPoint(53.798006,56.488012), 14);
var gpx = new YMaps.GPX("http://sarapul.ru/bus/bus/2g.xml");
map.addOverlay(gpx);
var ml = new YMaps.YMapsML("http://sarapul.ru/bus/bus/2st.xml");
map.addOverlay(ml);
YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
ml.get(0).forEach(function (obj) {
obj.setBalloonOptions({
margin: [190, 50, 10, 10]
}
}
}
map.redraw( // Перерисовка карты
(function($) {
$(function() {
$("#control").load("bus/2.html");
})
})(jQuery)
return false;
} 

 

21 комментарий

"Расписание может отличаться на несколько минут, вслучае избежании недоразумений, просьба приходить на остановку заранее!" - ребята, пожалуйста, перепишите на нормальный русский язык, очень смешно получается.

Да ну Вас всех нафиг!

Хоть бы кто подсказал что ли! 

 

В javascript вы можете получить доступ к адресу страницы (window.location), и соответственно, получить id маршрута или остановки. Пример работы с window.location вы можете найти в статье – http://clubs.ya.ru/mapsapi/replies.xml?item_no=6858

Хорошо, спасибо, поразбираюсь, на эту статью я бы даже и не подумал!

Не могу понять, как использовать это значение #bus2

Возвратить его пытаюсь  строчкой
return bus2;

 YMaps.jQuery("#bus2").bind('click', function () {
map.removeAllOverlays();
map.setCenter(new YMaps.GeoPoint(53.798006,56.488012), 14);
var gpx = new YMaps.GPX("http://sarapul.ru/bus/bus/2g.xml");
map.addOverlay(gpx);
var ml = new YMaps.YMapsML("http://sarapul.ru/bus/bus/2st.xml");
map.addOverlay(ml);
YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
ml.get(0).forEach(function (obj) {
obj.setBalloonOptions({
margin: [190, 50, 10, 10]
});
});
});
map.redraw(); // Перерисовка карты
(function($) {
$(function() {
$("#control").load("bus/2.html");
})
})(jQuery)
return bus2;
}); 

Помогите, не могу врубиться в это!

Зачем вы пытаетесь его возвратить? Что конкретно не получается?

Как отправить номер текущего маршрута в ссылку, и как потом открыть по этой ссылке?

 

вот

часть кода из примера

// Получаем параметры из URL'а
var params = {
ll : getParam("ll"), // Центр карты
spn : getParam("spn"), // Линейный размер области
t : getParam("t") // Тип карты
rot : getParam("rot") // Номер маршрута
};

// Если в урле заданы необходимые параметры
if (params.ll && params.spn && params.t && params.rot) {
// Устанавливаем требуемый тип карты
map.setType(typeConverter.nameToType(params.t));
} else {
// По умолчанию карта центрируется на Москве
map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
}

// Динамически формируем URL
YMaps.Events.observe(map, [map.Events.BoundsChange, map.Events.TypeChange], function () {
document.location.hash = "#t=" + typeConverter.typeToName(map.getType()) +
"&ll=" + map.getCenter().toString() +
"&spn=" + map.getBounds().getSpan().toString(6) +
  "&rot=" + 5 (что здесь быть должно?)
});

// Получение параметра из URL'а
function getParam (name, location) {
location = location || window.location.hash;
var res = location.match(new RegExp('[#&]' + name + '=([^&]*)', 'i'));
return (res && res[1] ? res[1] : ''); 

положите текущий маршрут в глобальную переменную - currentLine
также вынесите обработчик изменения состояние в отдельную функцию updateHash

function updateHash () {
document.location.hash = "#t=" + typeConverter.typeToName(map.getType()) +
"&ll=" + map.getCenter().toString() +
"&spn=" + map.getBounds().getSpan().toString(6) +
  "&rot=" + currentLine;
}

После получения параметров из URL, исходя из значения параметра rot нажмите на нужную кнопку - http://api.jquery.com/trigger/

в обработчик нажатия кнопки добавьте код:
currentLine = "busN" // устанавливаем метку текущего маршрута (где N номер маршрута)
updateHash(); // обновляем ссылку

замените функцию обработчик событий карты
YMaps.Events.observe(map, [map.Events.BoundsChange, map.Events.TypeChange], updateHash);

что-то я похожу туплю или чего-то недопонимаю.

белый экран выводит http://sarapul.ru/bus/scheme2.php

если убрать строчку   rot : getParam("rot")  

то карта работает, но на ссылке вечно висит bus2 и не открывает, то что надо!

YMaps.jQuery("#bus2").bind('click', function () {
map.removeAllOverlays();
map.setCenter(new YMaps.GeoPoint(53.798006,56.488012), 14);
var gpx = new YMaps.GPX("http://sarapul.ru/bus/bus/2g.xml");
map.addOverlay(gpx);
var ml = new YMaps.YMapsML("http://sarapul.ru/bus/bus/2st.xml");
map.addOverlay(ml);
YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
ml.get(0).forEach(function (obj) {
obj.setBalloonOptions({
margin: [190, 50, 10, 10]
});
});
});
currentLine = "bus2"; // устанавливаем метку текущего маршрута (где N номер маршрута)
updateHash(); // обновляем ссылку
$('#bus2').trigger('click');
map.redraw(); // Перерисовка карты
(function($) {
$(function() {
$("#control").load("detal/control.php #2root");
})
})(jQuery)
return false;
});

 

 

 

typeConverter = new TypeConverter();

// Получаем параметры из URL'а
var params = {
ll : getParam("ll"), // Центр карты
spn : getParam("spn"), // Линейный размер области
t : getParam("t") // Тип карты
rot : getParam("rot") // Тип карты
};

// Если в урле заданы необходимые параметры
if (params.ll && params.spn && params.t && params.rot) {
// Центрируем карту в нужном месте
map.setBounds(YMaps.GeoBounds.fromCenterAndSpan(YMaps.GeoPoint.fromString(params.ll), YMaps.Size.fromString(params.spn)));

// Устанавливаем требуемый тип карты
map.setType(typeConverter.nameToType(params.t));
} else {
// По умолчанию карта центрируется на Москве
map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
}

// Динамически формируем URL
YMaps.Events.observe(map, [map.Events.BoundsChange, map.Events.TypeChange], updateHash);

function updateHash () {
document.location.hash = "#t=" + typeConverter.typeToName(map.getType()) +
"&ll=" + map.getCenter().toString() +
"&spn=" + map.getBounds().getSpan().toString(6) +
"&rot=" + currentLine;
}


// Получение параметра из URL'а
function getParam (name, location) {
location = location || window.location.hash;
var res = location.match(new RegExp('[#&]' + name + '=([^&]*)', 'i'));
return (res && res[1] ? res[1] : '');
}


// Конвертер типов карт
// Если тип карты не был определен, то по умолчанию возвращается тип карты YMaps.MapType.MAP (или имя "map")
function TypeConverter () {
// Доступные типы карты
var types = [YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID],

// Имена карт
names = ["map", "sat", "hyb"];

// Возвращает имя карты по ее типу
this.typeToName = function (type) {
return names[valid(YMaps.jQuery.inArray(type, types))];
};

// Возвращает тип карту по имени
this.nameToType = function (name) {
return types[valid(YMaps.jQuery.inArray(name, names))];
};

// Проверяет правильность полученного индекса
function valid (index) {
return (index == -1) ? 0 : index;
}

};

включите консоль и вы увидите что у вас ошибка в js 

missing } after property listrot : getParam("rot")       // Тип карты

не хватает запятой.

Вот формируется ссылка: http://sarapul.ru/bus/scheme2.php#rot=bus2&t=map&ll=53.801268,56.485875&spn=0.084972,0.024456

Но при обновлении открывается все равно общая схема.

И при малейшеhttp://sarapul.ru/bus/scheme2.php#rot=undefined&t=map&ll=53.801182,56.485495&spn=0.084972,0.024457м движении теряется. параметр   rot=bus2

 

та промблема решена, теперь это все работает, когда маршрут 1, а когда дописываешь код в другой маршрут, тупо переходит на главную! 

trigger("click") нужно вызывать только из одного места - // Если в урле заданы необходимые параметры

 


TypeConverter скопировнный из примера не умеет работать с типами из народной карты, замените в нем
[YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID]
на
[YMaps.MapType.PMAP, YMaps.MapType.PHYBRID]

Не понимаю, как вызвать этот триггер, никак у меня не срабатывает он!

$('#params.rot').trigger('click'); 

Или как быть должно? 

$('#' + params.rot).trigger('click')

Большое Вам спасибо, что помогли, теперь еще немного понял из js. Сам програмировать еще учусь и не все понимаю. А в универе на нашей специальности только C++! 

пожалуйста

Антон, мы добавили Ваш проект на сайт API Карт. http://api.yandex.ru/maps/features/?p=nmaps. Надеюсь, Вы не возражаете? :-)

Нисколько не возражаю!