В данной статьей речь идет о таком удобном и наглядном интерфейсе как Яндекс.карты. Итак, перед нами стоит задача организовать на сайт отображение фирмы или любого другого объекта (например, объявление о недвижимости если у вас сайт или скрипт продажи недвижимости, место осмотра продаваемой машины на доске объявлений продажи авто, место для собеседования в скрипте работы и т.п.) на карте в виде метки «Я здесь».
Для начала нужно зарегистрироваться на сайте http://api.yandex.ru/maps для получения
индивидуального API-ключа. Данный ключ привязывается к домену и вставляется в код скрипта карт.
Предположим, что у нас есть доска объявлений о продаже недвижимости и нам надо поставить маркер на карте для каждого объекта. В личном разделе, где пользователь видит список добавленных объявлений, ставим около каждого объявления ссылку на страницу geo.php. Идентификатор объекта можно передать так: geo.php?texid=5.
Теперь добавляем в базу данных в таблицу объявлений следующие поля:
mysql_query("ALTER TABLE `advert` ADD `geolng` TEXT NOT NULL ;"); mysql_query("ALTER TABLE `advert` ADD `geolat` TEXT NOT NULL ;"); mysql_query("ALTER TABLE `advert`ADD `geozoom` TEXT NOT NULL ;");
Далее создаем файл geo.php следующего содержания:
<? // тут шапка ваших страниц, код авторицации и другие функции сайта $addanket=$_GET['addanket']; $delanket=$_GET['delanket']; $lng=$_GET['lng']; $lat=$_GET['lat']; $zoom=$_GET['zoom']; // это добавление в базу данных о местонахождении if ($addanket == 'yes') { $sql="update `advert` SET geolng='$lng',geolat='$lat',geozoom='$zoom' WHERE ID='$texid'"; $result=@mysql_query($sql,$db); } // это удаление из базы данных о местонахождении if ($delanket == 'yes') { $sql="update `advert` SET geolng='',geolat='',geozoom='' WHERE ID='$texid'"; $result=@mysql_query($sql,$db); } // далее идет код генерации карты с нанесенным на нее маркером $result = @mysql_query("SELECT * FROM `advert` WHERE ID = '$texid'"); while ($myrow=mysql_fetch_array($result)) { $geolng=$myrow["geolng"]; $geolat=$myrow["geolat"]; $geozoom=$myrow["geozoom"]; } ?> <head> <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ваш_API_ключ" type="text/javascript"></script> <script type="text/javascript"> //Создание обработчика для события window.onLoad YMaps.jQuery(function () { //Создание экземпляра карты и его привязка к созданному контейнеру var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]); //Установка для карты ее центра и масштаба map.setCenter(new YMaps.GeoPoint(37.609217986464515, 55.75355904134578), 10); var placemark = null; <? // в указанном выше коде используются координаты центра Москвы - 37.609217986464515, 55.75355904134578. ?> <? // если установлена метка, то выводим ее на карту if ($geolng != '' and $geolat != '' and $geozoom != '') { ?> //Установка центра map.setCenter(new YMaps.GeoPoint(<? echo "$geolng";?>, <? echo "$geolat";?>), <? echo "$geozoom";?>); //Создание перетаскиваемой метки placemark = new YMaps.Placemark(new YMaps.GeoPoint(<? echo "$geolng";?>, <? echo "$geolat";?>), {draggable: true, style: "default#redPoint"}); placemark.setIconContent("Я здесь!"); map.addOverlay(placemark); //Установка слушателя события перетаскивания метки YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) { document.getElementById("lng").value = obj.getGeoPoint().getLng(); document.getElementById("lat").value = obj.getGeoPoint().getLat(); document.getElementById("zoom").value = map.getZoom(); }); <? } ?> // Ниже идет код генерации карты //Ограничение масштабирования map.setMinZoom(10); //Элементы управления map.addControl(new YMaps.Zoom({noTips:true})); map.addControl(new YMaps.SearchControl(), new YMaps.ControlPosition(YMaps.ControlPosition.TOP_LEFT, new YMaps.Point(8, 5))); //Масштабирование карты колесом прокрутки мыши map.enableScrollZoom(); //Щелчок по карте YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) { //Сохранение координат document.getElementById("lng").value = mEvent.getGeoPoint().getLng(); document.getElementById("lat").value = mEvent.getGeoPoint().getLat(); document.getElementById("zoom").value = map.getZoom(); if (placemark==null){ //Создание перетаскиваемой метки placemark = new YMaps.Placemark(mEvent.getGeoPoint(), {draggable: true, style: "default#bluePoint"}); placemark.setIconContent("Я здесь!"); map.addOverlay(placemark); //Установка слушателя события перетаскивания метки YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) { document.getElementById("lng").value = obj.getGeoPoint().getLng(); document.getElementById("lat").value = obj.getGeoPoint().getLat(); document.getElementById("zoom").value = map.getZoom(); }); }else{ //Перемещение метки placemark.setCoordPoint(mEvent.getGeoPoint()); } }, this); }); </script> <? // теперь вставляем форму и непосредственно выводим карту <div id="YMapsID" style="width: 97%; height: 560px; border: 1px solid #CCCCCC;"><script type="text/javascript">document.write('Идет загрузка...<br><br>');</script></div> <div align=center> <table><tr> <form method="get" style="margin: 0;"> <td> <input type="hidden" name="zerolng" value="0"> <input type="hidden" name="zerolat" value="0"> <input type="hidden" name="texid" value="<? echo "$texid";?>"> <input type="hidden" name="delanket" value="yes"> <input type="submit" value="Удалить"> </td> </form> <form method="get" style="margin: 0;"> <td width=30> </td><td> <input type="hidden" id="lng" name="lng" value="<? echo "$geolng";?>"> <input type="hidden" id="lat" name="lat" value="<? echo "$geolat";?>"> <input type="hidden" id="zoom" name="zoom" value="<? echo "$geozoom";?>"> <input type="hidden" name="addanket" value="yes"> <input type="hidden" name="texid" value="<? echo "$texid";?>"> <input type="submit" value="Сохранить"> </td> </form> </tr></table></div>
Вот и все. После нажатия кнопки «Сохранить» данные заносятся в базу и на карте делается отметка о местонахождении вашего объекта. Осталось сделать вывод карты в самом объявлении. Приводятся только фрагменты кода. Первый фрагмент можно вставить вверху файла:
// карта $result = @mysql_query("SELECT * FROM $textable WHERE ID = '$link'"); // $link – это номер объявления while ($myrow=mysql_fetch_array($result)) { $geolng=$myrow["geolng"]; $geolat=$myrow["geolat"]; $geozoom=$myrow["geozoom"]; } if ($geolng != '' and $geolat != '' and $geozoom != '') { ?> <script src="http://api-maps.yandex.ru/1.1/index.xml?key=<? echo "$yandexapikey";?>" type="text/javascript"></script> <script type="text/javascript"> //Создание обработчика для события window.onLoad YMaps.jQuery(function () { //Создание экземпляра карты и его привязка к созданному контейнеру var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]); //Установка для карты ее центра и масштаба map.setCenter(new YMaps.GeoPoint(37.609217986464515, 55.75355904134578), 10); var placemark = null; //Установка центра map.setCenter(new YMaps.GeoPoint(<? echo "$geolng";?>, <? echo "$geolat";?>), <? echo "$geozoom";?>); //Создание перетаскиваемой метки placemark = new YMaps.Placemark(new YMaps.GeoPoint(<? echo "$geolng";?>, <? echo "$geolat";?>), {draggable: true, style: "default#redPoint"}); placemark.setIconContent("Я здесь!"); map.addOverlay(placemark); //Установка слушателя события перетаскивания метки YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) { document.getElementById("lng").value = obj.getGeoPoint().getLng(); document.getElementById("lat").value = obj.getGeoPoint().getLat(); document.getElementById("zoom").value = map.getZoom(); }); //Ограничение масштабирования map.setMinZoom(10); //Элементы управления map.addControl(new YMaps.Zoom({noTips:true})); map.addControl(new YMaps.SearchControl(), new YMaps.ControlPosition(YMaps.ControlPosition.TOP_LEFT, new YMaps.Point(8, 5))); //Масштабирование карты колесом прокрутки мыши map.enableScrollZoom(); //Щелчок по карте YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) { //Сохранение координат document.getElementById("lng").value = mEvent.getGeoPoint().getLng(); document.getElementById("lat").value = mEvent.getGeoPoint().getLat(); document.getElementById("zoom").value = map.getZoom(); if (placemark==null){ //Создание перетаскиваемой метки placemark = new YMaps.Placemark(mEvent.getGeoPoint(), {draggable: true, style: "default#bluePoint"}); placemark.setIconContent("Я здесь!"); map.addOverlay(placemark); //Установка слушателя события перетаскивания метки YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) { document.getElementById("lng").value = obj.getGeoPoint().getLng(); document.getElementById("lat").value = obj.getGeoPoint().getLat(); document.getElementById("zoom").value = map.getZoom(); }); }else{ //Перемещение метки placemark.setCoordPoint(mEvent.getGeoPoint()); } }, this); }); </script> <? } // карта
И наконец в том месте где у вас выводятся данные о самом объявлении вставляете это:
<? if ($geolng != '' and $geolat != '' and $geozoom != '') { ?> <div id="YMapsID" style="width: 450px; height: 400px; border: 1px solid #CCCCCC;"><script type="text/javascript">document.write('Идет загрузка...<br><br>');</script></div> <? } ?>
Невежин Евгений http://nevius.ru