Создание меню для отображения коллекций объектов из YMapsML файла

Автор: | 23.01.2012

В прошлой заметке, я рассказал о том, как можно автоматически генерировать файл в формате 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 файла: 25 комментариев

  1. ustus

    Статья супер, спасибо!
    И главное доходчиво и все понятно для непрограммистов в отличие от мануалов яндекса — че там к чему не понять простому смертному…

  2. ILYA

    А нигде такого нету, чтобы тоже скрывать и отображать рубрики иконок, но для Гугл Мапс?

  3. Татьяна

    Подскажите пожалуйста, как сделать, чтобы при клике по ссылке на странице сайта выводилась определенная метка, а не все метки из БД и также не группа меток, а именно одна. Уже прочла все, что можно было прочесть, но нигде нет ответа…

  4. Татьяна

    Здравствуйте!
    Помогите, пожалуйста! Когда меняю в файле 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);
    });

    Но что же с файлом, который Вы дали в примере?!
    Помогите, пожалуйста, буду Вам очень признательна!

  5. Татьяна

    Подскажите, пожалуйста, как все это можно применить под OSM, предпологаю, что нужно изменить строку

    Только как?! Заказчику невозможно объяснить, что намного проще работать с яндекс-картами, чем с осм. Говорит, что яндекс — коммерческие карты и вскоре будут невыгодны.
    Помогите, пожалуйста! Самой, к сожалению, не разобраться…

    1. admin Автор записи

      Для отображения OSM можно использовать библиотеку OpenLayers или Leaflet. Но тут придется переделывать весь код, т.к. каждая библиотека имеет свои особенности. Можно отобразить карты OSM используя API Яндекс.Карт новой версии 2.0.
      И это тоже приведет к полной переделке исходного кода примера.

  6. Татьяна

    Добрый день.
    Скажите, пожалуйста, можно ли убрать или хотя бы как-то изменить надпись (сделать ее короче):
    © ЗАО «Резидент», © ФГУП «Верхневолжское аэрогеодезическое предприятие», 2009 – Условия использования
    или это будет нарушать пользовательское соглашение?!
    К примеру, на вот этом сайте — http://dstweb.ru/cont/ присутствует только «Яндекс — условия использования».
    Буду очень благодарна за Вашу помощь!

    1. admin Автор записи

      Я понимаю здесь указаны поставщики карт для Яндекса и убирать их нельзя. Для карты Москвы поставщики не указаны, т.к. Яндекс самостоятельно разрабатывал карту для Москвы и Московской области,по этому на сайте в примере их нет

  7. Татьяна

    Здравствуйте. Вы не могли бы помочь еще раз?!
    Не сильна в 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).

    Буду ждать Ваш ответ. И еще большое спасибо, что всегда отвечаете!!!

    1. admin Автор записи

      Нужно проверять состояния всех checkbox, и если состояние изменилось добавлять или удалять группу меток.
      Пример проверки if($(‘#show_vokzal’).attr(‘checked’) == ‘checked’) map.addOverlay(vokzal);

  8. Татьяна

    Проблема в том, что либо не ставится галочка, при клике по checkbox, хотя метки при этом появляются на карте, либо наоборот не пропадает (если ), уже несколько дней пытаюсь это побороть, но никак не получается.
    Вот: http://gipros.kiev.ua/viv-grups-menu-2.htm

  9. Grey

    Добрый вечер. В примере все метки скрыты при загрузке, а как их отобразить, все группы сразу, при загрузке карты?

    1. admin Автор записи

      Нужно после добавления пункта меню в список написать строку .click()

      Вот пример.

  10. Grey

    У меня несколько иной код, на API 2.0. При таком решении:

    function addMenuItem(group, map) {
    // Показать/скрыть группу геообъектов на карте
    $(«» + group.properties.get(‘name’) + ««)
    .bind(«click», function () {
    var link = $(this);
    // Если пункт меню «неактивный», то добавляем группу на карту,
    // иначе — удаляем с карты
    if (link.hasClass(«active»)) {
    map.geoObjects.remove(group);
    } else {
    map.geoObjects.add(group);
    }
    // Меняем «активность» пункта меню
    link.toggleClass(«active»);
    return false;
    })
    // Добавление нового пункта меню в список
    .appendTo(
    $(«»).appendTo($(«#menu»))
    ).click()
    }

    метки появляются сразу, но формируется почему-то лишь один пункт меню. Не подскажете, в чем ошибка?

  11. Александр

    доброго дня, Сергей
    такой вопрос возник, если у двух организаций из разных категорий совпадают адресакоординаты, каким образом можно или значок заменить(указав что там две огранизации) или как-то отобразить оба места?

    1. admin Автор записи

      Можно выводить информацию о находящихся организациях в виде списка в балуне, а метку оставить одну. В метке можно указать число организаций.

  12. Александр

    Здравствуйте,у меня такой вопрос как включить,чтобы отображались фотографии объектов,не получается прописать функцию обработке фотографии,как сделать правильно?

  13. Антон

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *