Программирование карт Димитровграда с помощью Яндекс карт
Впервые понадобилось программировать на API Яндекс-Карт. Не очень сложно, но и не очень просто.
Делать пришлось все вручную. Делюсь наработками.
Метки все лучше хранить в формате:
Имя метки, описание метки, координаты.
Дополнительно я хранил йп, время добавления, идентификатор метки. Сложности с которыми столкнулся - формирование массива меток в js, раскраска нужных меток (найденных по условию) и пользовательское добавление меток. Расскажу пока про третее (исходный js код можно посмотреть на странице карты Димитровграда):
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
map.openBalloon(mEvent.getGeoPoint(), "");
var myHtml = '<b>Метка</b><form action="/map/" method="POST" width="200">Значение:' + mEvent.getGeoPoint() + '<br><input type="hidden" id="position" name="position" style="width:100%"><input type="text" name="name" style="width:100%" value="Улица, Дом"><textarea name="descr" style="width:100%;height:5em">Дополнительная информация, комментарий</textarea><input type="submit" value="Добавить метку" style="width:200px"></form>';
map.openBalloon(mEvent.getGeoPoint(), myHtml);
document.getElementById('position').value=""+mEvent.getGeoPoint();
});
Принцип работы. При клике ловит координаты, создает форму для добавления и записывает координаты в hidden поле с значением позиции.
Формирование массива меток решил следующим способом.
В начале:
var placemark = [];
var place_count = 1;
При выводе массива меток:
placemark[place_count] = new YMaps.Placemark(new YMaps.GeoPoint(49.547535,54.227395), {style:styleKeys[1],hasHint: 1});
placemark[place_count].name = "<a href=\"/map/?id=1\">пр. Ленина, 5</a>";
placemark[place_count].description = "Кинотеатр";
map.addOverlay(placemark[place_count]);
place_count++;
Подсветку нужных ссылок сделал добавлением найденных меток в массив:
$find_arr=array();
$find_arr_c=0;
while($m=$db->fetch_array()){
$find_arr[$find_arr_c]=$m['_id'];
$find_arr_c++;
}
При выводе меток:
print 'placemark[place_count] = new YMaps.Placemark(new YMaps.GeoPoint('.mysql_real_escape_string($m['position']).'), {style:styleKeys['.($find_arr?(in_array($m['_id'],$find_arr)?'9':'0').'],hasHint: 1});';
Проверка на наличие id текущей метки в массиве найденных. Нашли? Тогда стиль метки номер 9, не нашли - номер 0.
В целом, работать с Яндекс картами понравилось. При наличие головы на плечах - можно сделать именно то, что необходимо.
Дата записи: 22.02.2010 22:35