Создание меню для отображения коллекций объектов из YMapsML файла
В прошлой заметке, я рассказал о том, как можно автоматически генерировать файл в формате YMapsML.
Для удобства пользователя, если YMapsML файл большого размера и содержит описание меток для различных категорий, удобнее отображать метки на карте по категориям, создав для управления специальное меню.
Сделать это можно двумя способами.
Подгружать данные одним файлом YMapsML, внутри файла разбив метки на группы и формируя на странице с картой меню для групп.
Подгружать для каждой группы свой YMapsML файл.
Пример реализации первого способа показан в документации, пример используемого YmapsML файла.
Для примера рассматриваемого в заметке «Генерируем файл в формате YmapsML с данными автоматически» код карты будет иметь вид:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Вывод файла YMapsML на карту по категориям</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" 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(44.0075,56.326944), 14);
// Добавление элементов управления
map.enableScrollZoom();
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.Zoom());
// Загрузка YMapsML
var ml = new YMaps.YMapsML("http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-3.php");
// Обработчик успешной загрузки
YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
// Создание списка групп
ml.get(0).forEach(function (item) {
addMenuItem(item, map, YMaps.jQuery("#menu"));
});
});
// Обработчик неудачной загрузки
YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
alert("При загрузке данных произошла ошибка: " + error);
});
})
// Добавление одного пункта в список
function addMenuItem (group, map, menuContainer) {
// Показать/скрыть группу на карте
YMaps.jQuery("<a class=\"title\" href=\"#\">" + group.name + "</a>")
.bind("click", function () {
var link = YMaps.jQuery(this);
// Если пункт меню "неактивный", то добавляем группу на карту,
// иначе - удаляем с карты
if (link.hasClass("active")) {
map.removeOverlay(group);
} else {
map.addOverlay(group);
}
// Меняем "активность" пункта меню
link.toggleClass("active");
return false;
})
// Добавление нового пункта меню в список
.appendTo(
YMaps.jQuery("<li></li>").appendTo(menuContainer)
)
};
</script>
<style type="text/css">
/* Оформление меню (начало)*/
#menu {
list-style: none;
margin: 0;
padding: 0;
}
#menu a {
text-decoration: none;
border-bottom: dashed 1px;
}
a.active {
color: #000;
}
/* Оформление меню (конец)*/
</style>
</head>
<body>
<table>
<tr>
<td><div id="YMapsID" style="width:800px;height:700px"></div></td>
<td valign="top"><ul id="menu"></ul></td>
</tr>
<table>
</body>
</html>Нам также надо немного изменить код файла create_ymapsml-2.php
Он будет иметь следующий код:
<?php
header("Content-type: text/xml");
include("bd.php");
$styleorg = array("#styleHotels", "#styleTrain", "#styleInternetcafe", "#styleCafe", "#styleCinema", "#styleMuseum", "#styleParks", "#styleShips", "#styleTheater", "#styleTurism", "#styleFitness");
echo '<ymaps xmlns="http://maps.yandex.ru/ymaps/1.x" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd">
<Representation xmlns="http://maps.yandex.ru/representation/1.x">
<Style gml:id="commonStyle">
<iconStyle>
<size x="32" y="37"/>
<offset x="-16" y="-18"/>
</iconStyle>
<balloonContentStyle>
<template>#balloonTemplate</template>
</balloonContentStyle>
</Style>
<Style gml:id="styleHotels">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/hotel.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleTrain">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/train.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleInternetcafe">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/internet.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleCafe">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/coffee.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleCinema">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/cinema.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleMuseum">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/museum.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleParks">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/parks.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleShips">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/ships.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleTheater">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/theater.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleTurism">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/turism.png
</href>
</iconStyle>
</Style>
<Style gml:id="styleFitness">
<parentStyle>#commonStyle</parentStyle>
<iconStyle>
<href>
http://webmap-blog.ru/examples/ymap-ymapsml/images/fitness.png
</href>
</iconStyle>
</Style>
<Template gml:id="balloonTemplate">
<text><![CDATA[
<div style="font-size:12px;">
<div style="color:#ff0303;font-weight:bold">$[name]</div>
<div>Адрес: $[metaDataProperty.AnyMetaData.adres|не задан]</div>
<div>Телефон: $[metaDataProperty.AnyMetaData.telefon|не задан]</div>
<div>Тип: $[metaDataProperty.AnyMetaData.type|не задан]</div>
</div>]]></text>
</Template>
</Representation>
<GeoObjectCollection>
<gml:name>Объекты карте</gml:name>
<gml:featureMembers>';
for($i=1; $i<12; $i++)
{
$query1= "SELECT * FROM org_yandexmapnn WHERE CAT_ID = '$i'";
$result1 = mysql_query($query1);
echo '<GeoObjectCollection>
<gml:name>', mysql_result($result1,0,'TYPE'), '</gml:name>
<gml:featureMembers>';
if(mysql_numrows($result1)>1)
{
while ($par1 = mysql_fetch_array($result1))
{
echo '<GeoObject gml:id="', $par1['ID'], '">';
echo '<gml:name>', htmlspecialchars($par1['NAME']), '</gml:name>';
echo '<gml:metaDataProperty>';
echo '<AnyMetaData>';
echo '<adres>', $par1['ADRES'], '</adres>';
echo '<telefon>', $par1['TELEPHON'], '</telefon>';
echo '<type>', $par1['TYPE'], '</type>';
echo '</AnyMetaData>';
echo '</gml:metaDataProperty>';
echo '<gml:Point>';
echo '<gml:pos>', $par1['XX'], ' ', $par1['YY'], '</gml:pos>';
echo '</gml:Point>';
echo '</GeoObject>';
echo "\n";
}
}
else
{
echo '<GeoObject gml:id="', mysql_result($result1,0,'ID'), '">';
echo '<gml:name>', mysql_result($result1,0,'NAME'), '</gml:name>';
echo '<gml:metaDataProperty>';
echo '<AnyMetaData>';
echo '<adres>', mysql_result($result1,0,'ADRES'), '</adres>';
echo '<telefon>', mysql_result($result1,0,'TELEPHON'), '</telefon>';
echo '<type>', mysql_result($result1,0,'TYPE'), '</type>';
echo '</AnyMetaData>';
echo '</gml:metaDataProperty>';
echo '<gml:Point>';
echo '<gml:pos>', mysql_result($result1,0,'XX'), ' ', mysql_result($result1,0,'YY'), '</gml:pos>';
echo '</gml:Point>';
echo '</GeoObject>';
}
echo '</gml:featureMembers>
<style>', $styleorg[$i-1],'</style>
</GeoObjectCollection>';
echo "\n";
}
echo '</gml:featureMembers>
</GeoObjectCollection>
</ymaps>';
?>
Посмотреть работу примера в действии
Теперь рассмотрим реализацию второго варианта.
Здесь меню будет уже сразу присутствовать на карте, а не формироваться динамически как в первом варианте.
Вот код меню:
<div style="margin-left: 60%; width: 40%"> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/hotel.png" alt="Гостиница" width="32" height="37" align="middle" /><span id="show_hotels" class="link">Гостиница</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/train.png" width="32" height="37" align="middle" alt="Железнодорожный вокзал" /><span id="show_vokzal" class="link">Железнодорожный вокзал</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/internet.png" width="32" height="37" align="middle" alt="интернет-кафе" /><span id="show_internetcafe" class="link">интернет-кафе</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/coffee.png" width="32" height="37" align="middle" alt="Кафе и рестораны" /><span id="show_cafe" class="link">Кафе и рестораны</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/cinema.png" width="32" height="37" align="middle" alt="Кинотеатр" /><span id="show_cinema" class="link">Кинотеатр</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/museum.png" width="32" height="37" align="middle" alt="Музеи" /><span id="show_museum" class="link">Музеи</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/parks.png" width="32" height="37" align="middle" alt="Парки" /><span id="show_parks" class="link">Парки</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/ships.png" width="32" height="37" align="middle" alt="Речной вокзал" /><span id="show_ships" class="link">Речной вокзал</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/theater.png" width="32" height="37" align="middle" alt="Театры" /><span id="show_theater" class="link">Театры</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/turism.png" width="32" height="37" align="middle" alt="Туристическое агентство" /><span id="show_turism" class="link">Туристическое агентство</span><br /> <img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/fitness.png" width="32" height="37" align="middle" alt="Фитнес центы, спортивные клубы" /><span id="show_fitness" class="link">Фитнес центы, спортивные клубы</span> </div>
Для скрытия и отображения групп маркеров на карте мы используем возможности javascrip-библиотеки jQuery.
Полный код файла viv-grups-menu-2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вывод файла YMapsML на карту по категориям - вариант 2</title>
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
<style>
.link:hover
{
text-decoration: none;
}
.link
{
cursor: pointer;
text-decoration: underline;
}
</style>
<script type="text/javascript">
var map;
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(44.0075,56.326944), 14);
//Добавляем элементы управления.
map.addControl(new YMaps.TypeControl());//Тип карты, кнопочки Схема, Гибрид, Спутник
map.addControl(new YMaps.ToolBar());//Тулбар, кнопки Рука, Лупа, Линейка
map.addControl(new YMaps.Zoom());//Увеличение
// Гостиницы
var hotels = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=1');
YMaps.Events.observe(hotels, hotels.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_hotels").toggle(function(){
map.addOverlay(hotels);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(hotels);
YMaps.jQuery(this).css("font-weight","normal");
});
// Железнодорожный вокзал
var vokzal = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=2');
YMaps.Events.observe(vokzal, vokzal.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_vokzal").toggle(function(){
map.addOverlay(vokzal);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(vokzal);
YMaps.jQuery(this).css("font-weight","normal");
});
// интернет-кафе
var internetcafe = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=3');
YMaps.Events.observe(internetcafe, internetcafe.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_internetcafe").toggle(function(){
map.addOverlay(internetcafe);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(internetcafe);
YMaps.jQuery(this).css("font-weight","normal");
});
// Кафе и рестораны
var cafe = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=4');
YMaps.Events.observe(cafe, cafe.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_cafe").toggle(function(){
map.addOverlay(cafe);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(cafe);
YMaps.jQuery(this).css("font-weight","normal");
});
// Кинотеатр
var cinema = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=5');
YMaps.Events.observe(cinema, cinema.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_cinema").toggle(function(){
map.addOverlay(cinema);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(cinema);
YMaps.jQuery(this).css("font-weight","normal");
});
//Музеи
var museum = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=6');
YMaps.Events.observe(museum, museum.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_museum").toggle(function(){
map.addOverlay(museum);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(museum);
YMaps.jQuery(this).css("font-weight","normal");
});
// Парки
var parks = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=7');
YMaps.Events.observe(parks, parks.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_parks").toggle(function(){
map.addOverlay(parks);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(parks);
YMaps.jQuery(this).css("font-weight","normal");
});
// Речной вокзал
var ships = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=8');
YMaps.Events.observe(ships, ships.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_ships").toggle(function(){
map.addOverlay(ships);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(ships);
YMaps.jQuery(this).css("font-weight","normal");
});
// Театры
var theater = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=9');
YMaps.Events.observe(theater, theater.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_theater").toggle(function(){
map.addOverlay(theater);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(theater);
YMaps.jQuery(this).css("font-weight","normal");
});
// Туристическое агентство
var turism = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=10');
YMaps.Events.observe(turism, turism.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_turism").toggle(function(){
map.addOverlay(turism);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(turism);
YMaps.jQuery(this).css("font-weight","normal");
});
// Фитнес центы, спортивные клубы
var fitness = new YMaps.YMapsML('http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=11');
YMaps.Events.observe(fitness, fitness.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
YMaps.jQuery("#show_fitness").toggle(function(){
map.addOverlay(fitness);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(fitness);
YMaps.jQuery(this).css("font-weight","normal");
});
});
</script>
</head>
<body>
<div style="width: 100%">
<div id="YMapsID" style="width: 60%;height:600px; float:left;"></div>
<div style="margin-left: 60%; width: 40%">
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/hotel.png" alt="Гостиница" width="32" height="37" align="middle" /><span id="show_hotels" class="link">Гостиница</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/train.png" width="32" height="37" align="middle" alt="Железнодорожный вокзал" /><span id="show_vokzal" class="link">Железнодорожный вокзал</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/internet.png" width="32" height="37" align="middle" alt="интернет-кафе" /><span id="show_internetcafe" class="link">интернет-кафе</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/coffee.png" width="32" height="37" align="middle" alt="Кафе и рестораны" /><span id="show_cafe" class="link">Кафе и рестораны</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/cinema.png" width="32" height="37" align="middle" alt="Кинотеатр" /><span id="show_cinema" class="link">Кинотеатр</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/museum.png" width="32" height="37" align="middle" alt="Музеи" /><span id="show_museum" class="link">Музеи</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/parks.png" width="32" height="37" align="middle" alt="Парки" /><span id="show_parks" class="link">Парки</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/ships.png" width="32" height="37" align="middle" alt="Речной вокзал" /><span id="show_ships" class="link">Речной вокзал</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/theater.png" width="32" height="37" align="middle" alt="Театры" /><span id="show_theater" class="link">Театры</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/turism.png" width="32" height="37" align="middle" alt="Туристическое агентство" /><span id="show_turism" class="link">Туристическое агентство</span><br />
<img src="http://webmap-blog.ru/examples/ymap-ymapsml/images/fitness.png" width="32" height="37" align="middle" alt="Фитнес центы, спортивные клубы" /><span id="show_fitness" class="link">Фитнес центы, спортивные клубы</span>
</div>
</div>
</body>
</html>Код файла для создания YmapsML будет следующий
<?php
header("Content-type: text/xml");
include("bd.php");
$ID = $_GET['id']-1;
$styleorg = array("styleHotels", "styleTrain", "styleInternetcafe", "styleCafe", "styleCinema", "styleMuseum", "styleParks", "styleShips", "styleTheater", "styleTurism", "styleFitness");
$image_address = array("http://webmap-blog.ru/examples/ymap-ymapsml/images/hotel.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/train.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/internet.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/coffee.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/cinema.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/museum.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/parks.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/ships.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/theater.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/turism.png",
"http://webmap-blog.ru/examples/ymap-ymapsml/images/fitness.png");
echo '<ymaps xmlns="http://maps.yandex.ru/ymaps/1.x" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd">
<Representation xmlns="http://maps.yandex.ru/representation/1.x">';
echo '<Style gml:id="', $styleorg[$ID], '">';
echo '<iconStyle><href>', $image_address[$ID],
'</href><size x="32" y="37"/>
<offset x="-16" y="-18"/>
</iconStyle>
<balloonContentStyle>
<template>#balloonTemplate</template>
</balloonContentStyle>
</Style>
<Template gml:id="balloonTemplate">
<text><![CDATA[
<div style="font-size:12px;">
<div style="color:#ff0303;font-weight:bold">$[name]</div>
<div>Адрес: $[metaDataProperty.AnyMetaData.adres|не задан]</div>
<div>Телефон: $[metaDataProperty.AnyMetaData.telefon|не задан]</div>
<div>Тип: $[metaDataProperty.AnyMetaData.type|не задан]</div>
</div>]]></text>
</Template>
</Representation>
<GeoObjectCollection>
<gml:name>Объекты карте</gml:name>
<style>#', $styleorg[$ID],'</style>
<gml:featureMembers>';
$idzap = $ID+1;
$query1= "SELECT * FROM org_yandexmapnn WHERE CAT_ID = '$idzap'";
$result1 = mysql_query($query1);
while ($par1 = mysql_fetch_array($result1))
{
echo '<GeoObject gml:id="', $par1['ID'], '">';
echo '<gml:name>', htmlspecialchars($par1['NAME']), '</gml:name>';
echo '<gml:metaDataProperty>';
echo '<AnyMetaData>';
echo '<adres>', $par1['ADRES'], '</adres>';
echo '<telefon>', $par1['TELEPHON'], '</telefon>';
echo '<type>', $par1['TYPE'], '</type>';
echo '</AnyMetaData>';
echo '</gml:metaDataProperty>';
echo '<gml:Point>';
echo '<gml:pos>', $par1['XX'], ' ', $par1['YY'], '</gml:pos>';
echo '</gml:Point>';
echo '</GeoObject>';
echo "\n";
}
echo '</gml:featureMembers>
</GeoObjectCollection>
</ymaps>';
?>
Похожие статьи:
- Генерируем файл в формате YmapsML с данными автоматически
- Начинаем изучать язык YMapsML для Яндекс.Карт
- Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями – Продолжение-2
- Отображение на Яндекс.Картах файлов в формате GPX
- Создание поиска по своим меткам на Яндекс.Карте с использованием PHP и MySQL
26 января 2012 в 0:13
Статья супер, спасибо!
И главное доходчиво и все понятно для непрограммистов в отличие от мануалов яндекса — че там к чему не понять простому смертному…
14 февраля 2012 в 14:54
А нигде такого нету, чтобы тоже скрывать и отображать рубрики иконок, но для Гугл Мапс?
21 февраля 2012 в 2:50
Подскажите пожалуйста, как сделать, чтобы при клике по ссылке на странице сайта выводилась определенная метка, а не все метки из БД и также не группа меток, а именно одна. Уже прочла все, что можно было прочесть, но нигде нет ответа…
21 февраля 2012 в 8:40
Вот здесь, есть обсуждение примера решения.
Пример
29 марта 2012 в 23:33
Большое спасибо. Очень пригодилась статья.
24 апреля 2012 в 0:39
Здравствуйте!
Помогите, пожалуйста! Когда меняю в файле viv-grups-menu-2.htm строку http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=… на create_ymapsml.php?id=…, который, как мне кажется, соответствует Вашему файлу, выдает ошибку:
Ошибка: [object Object].
Ошибка из строки:
var hotels = new YMaps.YMapsML(‘http://webmap-blog.ru/examples/ymap-ymapsml/create_ymapsml-4.php?id=1′);
YMaps.Events.observe(hotels, hotels.Events.Fault, function (error) {
alert(‘Ошибка: ‘ + error);
});
Но что же с файлом, который Вы дали в примере?!
Помогите, пожалуйста, буду Вам очень признательна!
24 апреля 2012 в 14:33
Это была моя ошибка (bd.php). Простите за беспокойство!
24 апреля 2012 в 17:05
Подскажите, пожалуйста, как все это можно применить под OSM, предпологаю, что нужно изменить строку
Только как?! Заказчику невозможно объяснить, что намного проще работать с яндекс-картами, чем с осм. Говорит, что яндекс — коммерческие карты и вскоре будут невыгодны.
Помогите, пожалуйста! Самой, к сожалению, не разобраться…
24 апреля 2012 в 22:15
Для отображения OSM можно использовать библиотеку OpenLayers или Leaflet. Но тут придется переделывать весь код, т.к. каждая библиотека имеет свои особенности. Можно отобразить карты OSM используя API Яндекс.Карт новой версии 2.0.
И это тоже приведет к полной переделке исходного кода примера.
25 апреля 2012 в 22:53
Большое спасибо за ответ!
30 апреля 2012 в 11:36
Добрый день.
Скажите, пожалуйста, можно ли убрать или хотя бы как-то изменить надпись (сделать ее короче):
© ЗАО «Резидент», © ФГУП «Верхневолжское аэрогеодезическое предприятие», 2009 – Условия использования
или это будет нарушать пользовательское соглашение?!
К примеру, на вот этом сайте — http://dstweb.ru/cont/ присутствует только «Яндекс — условия использования».
Буду очень благодарна за Вашу помощь!
1 мая 2012 в 12:12
Я понимаю здесь указаны поставщики карт для Яндекса и убирать их нельзя. Для карты Москвы поставщики не указаны, т.к. Яндекс самостоятельно разрабатывал карту для Москвы и Московской области,по этому на сайте в примере их нет
3 мая 2012 в 22:44
Здравствуйте. Вы не могли бы помочь еще раз?!
Не сильна в js, поэтому сама сделать не могу. Я бы хотела, чтобы при клике на checkbox отображались определенные метки, т.е. вообщем-то все тоже самое, но с инпутом. Думаю, нужно изменить вот этот кусок, как-то указав в нем checked:
YMaps.jQuery(«#show_theater»).toggle(function(){
map.addOverlay(theater);
YMaps.jQuery(this).css(«font-weight»,»bold»);
}, function(){
map.removeOverlay(theater);
YMaps.jQuery(this).css(«font-weight»,»bold»);
});
Если мне не удалось объяснить, что я имею ввиду, посмотрите, пожалуйста, на моей странице(http://gipros.kiev.ua/viv-grups-menu-2.htm —> finansy).
Буду ждать Ваш ответ. И еще большое спасибо, что всегда отвечаете!!!
4 мая 2012 в 16:51
Нужно проверять состояния всех checkbox, и если состояние изменилось добавлять или удалять группу меток.
Пример проверки if($(‘#show_vokzal’).attr(‘checked’) == ‘checked’) map.addOverlay(vokzal);
4 мая 2012 в 17:08
Очередной вопрос — куда это вставить?! =)
4 мая 2012 в 19:54
Проблема в том, что либо не ставится галочка, при клике по checkbox, хотя метки при этом появляются на карте, либо наоборот не пропадает (если ), уже несколько дней пытаюсь это побороть, но никак не получается.
Вот: http://gipros.kiev.ua/viv-grups-menu-2.htm
5 мая 2012 в 19:11
Сделал пример с checkbox
9 мая 2012 в 22:26
Огромное спасибо. Вы просто талант!!!