28:null 29:["$","title",null,{"children":"Работа с Yandex Map (создание связанных карт) | Olga Polovikova | Observable"}] 2f:T575, function printAddress(newPlacemark, coords) { newPlacemark.properties.set('iconCaption', 'поиск...'); ymaps.geocode(coords).then(function (res) { // ищем информацию только по первому найденному объекту var firstGeoObject = res.geoObjects.get(0); newPlacemark.properties .set({ // Формируем строку с данными об объекте. iconCaption: [ // Название населенного пункта или вышестоящее административно-территориальное образование. firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(), // Получаем путь до топонима, если метод вернул null, запрашиваем наименование здания. firstGeoObject.getThoroughfare() || firstGeoObject.getPremise() ].filter(Boolean).join(', '), // В качестве контента балуна задаем строку с адресом объекта. balloonContent: firstGeoObject.getAddressLine() }); }); }30:T686,{yield con[0]; //очистка контейнеров con[0].innerHTML = ''; con[1].innerHTML = ''; // к левой карте привязываем свою локацию // var location = ymaps.geolocation; yield con[0]; let map1 = new ymaps.Map(con[0], { center: [53.36, 83.75], //Барнаул zoom: scale}); let map2 = new ymaps.Map(con[1], { center: [53.36, 83.75], //Барнаул zoom: scale+4}); yield con[1]; map1.events.add('click', function (e) { var coords = e.get('coords'); map1.balloon.open(coords, `Выбрано:[${coords[0].toFixed(2)}, ${coords[1].toFixed(2)}]`); //плавное перемешщение в заданную точку на правой карте map2.panTo(coords, {delay: 1000, duration: 1000, flying: true}); var circle = new ymaps.Circle([coords, 300], {geodesic: true, hintContent: "Полученная область"}, { // Задаем опции круга. // Цвет заливки. // Последний байт (33) определяет прозрачность. // Прозрачность заливки также можно задать используя опцию "fillOpacity". fillColor: "#aa003333", // Цвет обводки. strokeColor: "#334466", // Прозрачность обводки. strokeOpacity: 0.9, // Ширина обводки в пикселях. strokeWidth: 2 }); // Добавляем круг на карту. map2.geoObjects.removeAll(); map2.geoObjects.add(circle); }); }31:[] 2c:{"id":"6130f76d423a35b4","slug":null,"title":" Работа с Yandex Map (создание связанных карт)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-12-07T11:28:34.414Z","update_time":"$D2022-12-07T11:28:34.414Z","view_time":null,"first_public_time":"$D2022-12-07T11:28:34.414Z","fork":{"id":"4b5076a666638b51","slug":null,"title":" Работа с Yandex Map (создание связанных карт)","owner":{"id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6d2574fdcec31556","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":"starter_2024"},"version":812,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39bbe44713bf1f81","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":null}],"members":[{"type":"individual","id":"39bbe44713bf1f81","login":"39bbe44713bf1f81","name":"Olga Polovikova","avatar_url":"https://avatars-next.observableusercontent.com/59cbdcabd03e36702a8f8df561a992cf1232c54b9c6502e5afb83e05a340c322","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":" Работа с Yandex Map (создание связанных карт)","cells":[{"id":283,"value":"# Работа с Yandex Map (создание связанных карт)","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"### Настрока API Yandex Map","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":" Следующий код необходимо выполнить! (иначе будут ошибки)","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"// настрока API (спецмальный объект, который будет обеспечивать взаимодействие с yandex-сервисом):\nymaps = require('https://api-maps.yandex.ru/2.1/?apikey=7a8a7026-ae95-427c-82c4-cb2208bfc100&lang=ru_RU')\n .catch(() => window.ymaps)","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"map_yandex = []\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"### Определение координат: Пользователь задаёт локацию щелком мыши","pinned":false,"hidden":false,"mode":"md"},{"id":737,"value":"{let wind = html`

`;//контейнер\n yield wind;\n let map1 = new ymaps.Map(wind, {\n center: [53.36, 83.75], //Барнаул\n zoom: 13});\n // Проинициализируем координаты с центром карты\n var userCoords = map1.getCenter();\n var newPlacemark;\n // При щелчке на карте показывается балун со значениями координат\n map1.events.add('click', function (e) {\n var coords = e.get('coords');\n // map1.balloon.open(coords, `Выбрано:${coords}`);\n if (newPlacemark) {\n newPlacemark.geometry.setCoordinates(coords);\n }\n else \n {\n newPlacemark = new ymaps.Placemark(coords);\n }\n printAddress(newPlacemark, coords);\n map1.geoObjects.add(newPlacemark);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":807,"value":"Зададим функцию для поиска адреса по координатам","pinned":false,"hidden":false,"mode":"md"},{"id":799,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"places = [\"Лебединый заказник, озеро Светлое\", \"Гора Церковка, Белокуриха\", \"Денисова пещера, с. Чёрный Ануй, Солонешенский район, Алтайский край\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"### Несколько связанных карт ","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"viewof scale = Inputs.range([1, 12], {step: 1, value: 11, label: \"Масштаб карты:\", width:500})","pinned":true,"hidden":false,"mode":"ojs"},{"id":810,"value":"Карты связаны: \"щелчок мышью\" на левой карте определяет локацию на правой","pinned":false,"hidden":false,"mode":"md"},{"id":614,"value":"html`

`;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"Построим функцию для получения списка указателей на контейнеры: divs","pinned":false,"hidden":false,"mode":"md"},{"id":652,"value":"function divs() {\nvar container_1 = document.getElementById('wind_1');\nvar container_2 = document.getElementById('wind_2');\n return [container_1, container_2]; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"Массив контейнеров","pinned":true,"hidden":false,"mode":"md"},{"id":660,"value":"con = divs()","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"### Построение маршрута с текущей локации до выбранного места","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"viewof select_place = Inputs.select(places, {label: \"Укажите место назначения\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"types = [\"auto\", \"masstransit\", \"pedestrian\", \"bicycle\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":777,"value":"Типы маршрутизации: \"auto\" (по умолчанию) на автомобиле, \"masstransit\" на общественном транспорте, \"pedestrian\" пешеходный маршрут, \"bicycle\" маршрут на велосипеде.","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"viewof select_type = Inputs.select(types, {label: \"Укажите способ передвижения\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"{\n let wind = html`

`;//контейнер\n yield wind;\n let map = new ymaps.Map(wind, {\n center: [53.36, 83.75], //Барнаул\n zoom: 7});\n// Построение маршрута на автомобиле\n// Создание экземпляра маршрута.\n var multyroute_A_B = new ymaps.multiRouter.MultiRoute({\n referencePoints: [\n 'Баранул',\n select_place\n ],\n params: {\n // Тип маршрута: на автомобиле, пешком, велосипед...\n routingMode: select_type \n }\n }, {\n // Автоматически устанавливать границы карты так,\n // чтобы маршрут был виден целиком.\n boundsAutoApply: true\n });\n\n // Добавление маршрута на карту.\n map.geoObjects.add(multyroute_A_B);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"### Выделение области районов на карте Алтайского края (в разработке)\nОсуществлять поиск по регионам: в качестве идентификаторов можно использовать ISO-код региона. ","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"{\n let wind = html`

`;\n yield wind;\n let map = new ymaps.Map(wind, {\n center: [52.30, 82.47],\n zoom: 7 });\n \n let bordermap = ymaps.borders.load('RU', {lang: 'ru', quality: 1}).\n then(function (geojson) {\n var regions = ymaps.geoQuery(geojson);\n regions.search('properties.iso3166 = \"RU-ALT\"').\n setOptions({fillColor:'#ff001a', fillOpacity: 0.3, strokeColor: '#ffffff', strokeOpacity: 0.8, strokeWidth: 6});\n regions.addToMap(map);\n });\n map_yandex[2]=map\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"