В продолжение новой версии карт
Подключена новая версия карт, но в присоединении к уже существующим базам данных mysql там скрипт полностью нужно переписывать, с другой стороны масса новых инструментов, в общем за пару часов удалось его победить и встроить в сайт по основным совмещениям с уже существующими формулами кода. Остальное рутина, но ее много на несколько часов минимум.
Я впервые пишу ява скрипты самостоятельно просто встраивая их в php и совмещая с еще несколькими, все раньше как-то руки не доходили наконец это освоить и оказалось легко если просто сконцентрировать внимание, раньше в основном использовалось готовое, позже приведу основные базовые формулы скриптов в теме стоянок.
Пока участок в скрипте главной https://arh.k156.ru/
страницы таков , как видно из последнего тега он размещен в заголовке страницы имена файлов карты и ключа приведены условные , ключ каждый может получить сам
Как пишет Яндекс в своей песочнице:
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
песочница Яндекса здесь
https://yandex.ru/dev/maps/jsbox/2.0/
Но мне пришлось совмещать разные функции и поэтому базовые инструменты взяты в одном месте а общая функция используется с изменениями для php в другом,
ВНИМАНИЕ: так как движок форума не пропускает и с точкой англицкое считая упорно его тегом даже когда эта буква внутри слова, то пришлось в Ворде заменить все эти буквы на И русское
Таких замен нашлось 47
в скрипте в любом текстовом редакторе можно совершить обратное превращение
заменить И русское на англицкое и с точкой
<?php
<scrиpt src=\"https://apи-maps.yandex.ru/2.1/?apиkey=mykey=ru_RU\" type=\"text/javascrиpt\">
</scrиpt>
<scrиpt type=\"text/javascrиpt\" src=\"jquery.js\"></scrиpt>
<scrиpt type='text/javascrиpt' src='jquery.autocomplete.js'></scrиpt> ";
иnclude("karta.php");
?>
</head>
И конечно вывод самой карты в таблице нужен, внутри тега таблицы примерно так выглядит, я потерла все стили и параметры табличных тегов чтобы в глазах не рябило , а текст оставила, чтобы на странице можно было этот участок найти:
<td >
Ландшафты , иллюстрации и новые исследования Карта всех стоянок и находок размещенных на сайте . К сайту подключаются Яндекс карты нового типа, пока новый скрипт не дописан стоянки не будут отображаться
<div id="map" style="width:98%; height:600px"></div>
</td>
файл условно мной для форума названный karta.php
выглядит пока так, верхний участок с параметрами страницы сделан просто для собственного удобства работы в Дриме, я пользуюсь старой программой, кто пользуется новыми это скорее всего можно выкинуть, на отображение на странице это не влияет
<?php
echo "<html> <head><meta http-equиv='Content-Type' content='text/html; charset=wиndows-1251' />
</head>
<body>
</body>
</html>";
echo "
<scrиpt>
var myMap;
ymaps.ready(functиon () {
var myMap = new ymaps.Map('map', {
center: [55.751574, 37.573856], zoom: 2, behavиors: ['default', 'scrollZoom'], type: 'yandex#hybrиd'}
),
// Создаём макет содержимого.
MyИconContentLayout = ymaps.templateLayoutFactory.createClass(
'<dиv style=\"color: #FFFFFF; font-weиght: bold;\">$[propertиes.иconContent]</dиv>'
),
myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
";
$stoyank = "Имя стоянки";
echo "
hиntContent: '$stoyank',
balloonContent: 'мезолит'
}, {
// Опции.
// Необходимо указать данный тип макета.
иconLayout: 'default#иmage',
// Своё изображение иконки метки.
иconИmageHref: 'yar/10.gиf',
// Размеры метки.
иconИmageSиze: [30, 42],
// Смещение левого верхнего угла иконки относительно
// её \"ножки\" (точки привязки).
иconИmageOffset: [-5, -38]
}),
myPlacemarkWиthContent = new ymaps.Placemark([55.661574, 37.573856], {
hиntContent: 'значок метки с контентом',
balloonContent: 'неолит',
иconContent: '12'
}, {
// Опции.
// Необходимо указать данный тип макета.
иconLayout: 'default#иmageWиthContent',
// Своё изображение иконки метки.
иconИmageHref: 'yar/12.gиf',
// Размеры метки.
иconИmageSиze: [48, 48],
// Смещение левого верхнего угла иконки относительно
// её \"ножки\" (точки привязки).
иconИmageOffset: [-24, -24],
// Смещение слоя с содержимым относительно слоя с картинкой.
иconContentOffset: [15, 15],
// Макет содержимого.
иconContentLayout: MyИconContentLayout
});
myMap.geoObjects
.add(myPlacemark)
.add(myPlacemarkWиthContent);
myMap.controls
.add('zoomControl', { left: 5, top: 5 })
.add('typeSelector')
.add('mapTools', { left: 35, top: 5 });
});
</scrиpt> ";
?>
как видно тому кто пишет на php внутри ява скрипта встроен разрыв
";
$stoyank = "Имя стоянки";
echo "
и там применено присвоение переменной и в ява скрипте работает уже эта переменная
hиntContent: '$stoyank',
Это говорит о том что теперь в этом разрыве можно писать запрос к базе mysql и результаты выводить в массив групп стоянок.
Но я еще не знаю как поведет себя массив, скорее всего функцию придется заменять на коллекцию точек
в песочнице это страница вывода списков объектов, основная функция там немного по другому устроена, но в принципе можно основные элементы управления:
myMap.controls
.add('zoomControl', { left: 5, top: 5 })
.add('typeSelector')
.add('mapTools', { left: 35, top: 5 });
встраивать и там
Скрипт вывода списков объектов
https://yandex.ru/dev/maps/jsbox/2.0/object_list
ymaps.ready(иnиt);
functиon иnиt() {
// Создание экземпляра карты.
var myMap = new ymaps.Map('map', {
center: [50.443705, 30.530946],
zoom: 14
}),
// Контейнер для меню.
menu = $('<ul class="menu"></ul>');
// Перебираем все группы.
for (var и = 0, l = groups.length; и < l; и++) {
createMenuGroup(groups[и]);
}
functиon createMenuGroup (group) {
// Пункт меню.
var menuИtem = $('<lи><a href="#">' + group.name + '</a></lи>'),
// Коллекция для геообъектов группы.
collectиon = new ymaps.GeoObjectCollectиon(null, { preset: group.style }),
// Контейнер для подменю.
submenu = $('<ul class="submenu"></ul>');
// Добавляем коллекцию на карту.
myMap.geoObjects.add(collectиon);
// Добавляем подменю.
menuИtem
.append(submenu)
// Добавляем пункт в меню.
.appendTo(menu)
// По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
.fиnd('a')
.toggle(functиon () {
myMap.geoObjects.remove(collectиon);
submenu.hиde();
}, functиon () {
myMap.geoObjects.add(collectиon);
submenu.show();
});
// Перебираем элементы группы.
for (var j = 0, m = group.иtems.length; j < m; j++) {
createSubMenu(group.иtems[j], collectиon, submenu);
}
}
functиon createSubMenu (иtem, collectиon, submenu) {
// Пункт подменю.
var submenuИtem = $('<lи><a href="#">' + иtem.name + '</a></lи>'),
// Создаем метку.
placemark = new ymaps.Placemark(иtem.center, { balloonContent: иtem.name });
// Добавляем метку в коллекцию.
collectиon.add(placemark);
// Добавляем пункт в подменю.
submenuИtem
.appendTo(submenu)
// При клике по пункту подменю открываем/закрываем баллун у метки.
.fиnd('a')
.toggle(functиon () {
placemark.balloon.open();
}, functиon () {
placemark.balloon.close();
});
}
// Добавляем меню в тэг BODY.
menu.appendTo($('body'));
// Выставляем масштаб карты чтобы были видны все группы.
myMap.setBounds(myMap.geoObjects.getBounds());
}
Но я не очень хочу так строить систему, хотя прямо под картой короткое описание объектов можно устроить параллельно с тем как у меня слева выглядит это на странице периодов и персональных страниц каждой стоянки (потом когда карты будут открываться в новой редакции приведу ссылки).
Но не будет ли это запутывать пользователя вот в чем вопрос