Метки на карте

Геообъекты Яндекс.Карт

API Яндекс.Карт позволяет размещать на картах произвольное количество визуальных объектов (Геообъектов). (Геообъекты указывают и описывают объекты реального мира).

К геообъектам относятся: метки, круги, ломаные, прямоугольники, многоугольники, а также их коллекции. Геообъект характеризуется своей геометрией, которая определяется геометрическим типом (точка, круг, ломаная и пр.) и координатами географического объекта.

Базовым классом, реализующим геообъект является класс GeoObject. Экземпляр карты размещает геообъекты в собственном хранилище, реализованном в виде коллекции, ссылка на которую находится в поле geoObjects. Добавление геообъекта на карту, его изменение и удаление производится с помощью обращения к этой коллекции.

Тип геометрии присваивается геообъекту в момент его создания и не может быть изменен в дальнейшем. При этом координаты геометрии могут быть изменены как программно, так и пользователем с помощью визуального редактора.

Если геообъект был инициализирован без указания геометрии, то он не будет отображаться на карте. Присвоить тип геометрии такому геообъекту также будет невозможно.

 

Создадим геообъект и добавим его на карту

Создадим геообъект с помощью класса GeoObject и добавим геообъект на карту, с помощью обращения к коллекции GeoObjects:

// создадим геообъект var myGeoObject = new ymaps.GeoObject({ // Тип геометрии — точка. type: ‘Point’, // Координаты точки.

coordinates: [55.8, 37.8] }); // добавим геообъект на карту myMap.geoObjects.add(myGeoObject);

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

// создадим геообъект с типом геометрии «точка» (type: «Point») var myPlacemark = new ymaps.Placemark([55.8, 37.6]); // добавим геообъект на карту myMap.geoObjects.add(myPlacemark);

 

Cписок геообъектов

Рассмотрим список геообъектов используемых в классе GeoObject и соответствующих вспомогательных классов, предоставляющих упрощенный синтаксис для создания геообъекта.

 

Placemark

создадим геообъект типа геометрии «точка» двумя способами:

  • с помощью класса GeoObject
  • с помощью вспомогательного класса Placemark

 

// создадим геообъект с помощью класса — GeoObject var myPlacemark = new ymaps.GeoObject({ geometry: { type: «Point», // Тип — точка coordinates: [55.75396, 37.620393], // географические координаты } }); // или создадим геообъект с помощью вспомогательного класса — Placemark var myPlacemark = new ymaps.Placemark([55.75396, 37.620393]); // добавим геообъект на карту myMap.geoObjects.add(myPlacemark);

 

Circle

создадим геообъект типа геометрии «круг» двумя способами:

  • с помощью класса GeoObject
  • с помощью вспомогательного класса Circle

 

// создадим геообъект с помощью класса — GeoObject var myCircle = new ymaps.GeoObject({ geometry: { type: «Circle», // Тип — круг coordinates: [55.75396, 37.620393], // географические координаты radius: 15000 // радиус } }); // или создадим геообъект с помощью вспомогательного класса — Circle var myCircle = new ymaps.Circle([ coordinates: [55.75396, 37.620393], // географические координаты radius: 15000 // радиус ]); // добавим геообъект на карту myMap.geoObjects.add(myCircle);

 

Polyline

создадим геообъект типа геометрии «ломаная» двумя способами:

  • с помощью класса GeoObject
  • с помощью вспомогательного класса Polyline

 

// создадим геообъект с помощью класса — GeoObject var myPolyline = new ymaps.GeoObject({ geometry: { type: «LineString», // Тип — ломаная coordinates: [ [55.75396, 37.620393], [56.1, 37.620393], [55.75396, 37.1], [55.45, 37.4], [55.8, 37.9], ] } }); // или создадим геообъект с помощью вспомогательного класса — Polyline var myPolyline = new ymaps.Polyline( [ [55.75396, 37.620393], [56.1, 37.620393], [55.75396, 37.1], [55.45, 37.4], [55.8, 37.9], ] ); // добавим геообъект на карту myMap.geoObjects.add(myPolyline);

 

Rectangle

создадим геообъект типа геометрии «прямоугольник» двумя способами:

  • с помощью класса GeoObject
  • с помощью вспомогательного класса Rectangle

 

// создадим геообъект с помощью класса — GeoObject var myRectangle = new ymaps.GeoObject({ geometry: { type: «Rectangle», coordinates: [ [55.75396, 37.620393], [55.5, 38.1], ] } }); // или создадим геообъект с помощью вспомогательного класса — Rectangle var myRectangle = new ymaps.Rectangle( [ [55.75396, 37.620393], [55.5, 38.1], ] ); // добавим геообъект на карту myMap.geoObjects.add(myRectangle);

 

Как добавить на свой сайт карту (проезда к офису, дому, магазину) от Яндекса. API довольно таки сложное. Простой вебмастер скорее всего не сможет разобраться в документации.

(Как быстро добавить карту на сайт, читайте в посте от 30.09.2010  )

Вот пошаговая инструкция:

1. Нужно получить уникальный ключ. Для этого нужно зарегистрироваться на Яндексе. Или войти, если уже есть Яндекс Паспорт.  Адрес входа/регистрации — http://passport.yandex.ru/passport?mode=passport

2. Зайти  по адресу http://api.yandex.ru/maps/ и перейти по ссылке Получите уникальный API-ключ — ввести адрес сайта, в ответ получите уникальный ключ. На экране также будет пример. Но он указывает на Москву, и там нет никаких объектов. А нам нужно показать метку на карте своего города. Сохраните ключ для дальнейшего использования. 

3.  Теперь обязательно получить координаты: места, которое мы хотим показать, а также центра карты. Для этого заходим на страницу http://api.yandex.ru/maps/tools/getlonglat/ и ищем нашу точку. Например, вводим в поле «найти» адрес: «Киев Якуба Коласа, дом 2». Если поиск успешный, увидите карту, домик и крестик посередине. Домик- это найденная точка, крестик- центр карты. Справа будет окошко, в котором отображаются координаты. Можно передвинуть карту и установить домик на нужный подъезд.

У меня получилось: Координаты метки: 30.374253,50.433772, центр карты: 30.375112,50.433525. Масштаб карты- тоже важный параметр. Самое крупное увеличение- 16, самое малое — 1 (это весь мир 🙂 ). По умолчанию сервис показывает 16. Нам эти данные понадобятся в дальнейшем.

4. Вставляем код. Он состоит из двух частей: вызов API, и блок, в котором будет выводиться карта. Вызов API делаем в заголовке страницы (между тэгами <HEAD> и </HEAD>):

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/11700.jpg»
    type=»text/javascript»></script>
<script type=»text/javascript»> window.onload = function () {
var map = new YMaps.Map(document.getElementById(«YMapsID»));
map.setCenter(new YMaps.GeoPoint(30.375112,50.433525), 15);
// Создание метки
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(30.374253,50.433772));
// Установка содержимого значка метки
placemark.setIconContent(‘ICOM’);
// Добавление метки на карту
map.addOverlay(placemark);
// добавление зума
map.addControl(new YMaps.Zoom()); }
</script>

Этот код будет показывать карту , а на ней метку с текстом «ICOM». Не забудьте вставить ваш ключ в том месте, где у меня записано ЗДЕСЬ ВАШ КЛЮЧ!

А вместо ICOM впишите название вашей компании. 

Теперь нужно расположить сам блок, в котором будет карта, в тексте страницы (обычно это страница «Контакты»).

<div id=»YMapsID» style=»width: 600px; height: 400px»>&nbsp;</div>

Где width: 600px;  — ширина блока (карты) , height: 400px — высота. Можно подобрать такие значения, чтобы карта выглядела красиво. 

id=»YMapsID» — трогать нельзя, по умолчанию это идентификатор блока. 

 

Должно получиться что-то вроде этого:

<<< Как добавить на сайт карту Google

Сделать динамический баннер без FLASH >>>

Программа для работы с картами MosMap Marker

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

Если ваши потребности отображения данных на карте этим ограничиваются – тогда программа для работы с картами MosMap Marker скорее всего вам не нужна. Потому что её функции далеко выходят за рамки вышеозначенной задачи. Это не просто карта с возможностью ставить метки. Функционал позволяет создавать карты или работать с готовыми, интегрируясь с вашим программным обеспечением.

Для кого эта программа?

Программный комплекс предназначен для интеграции вашей информационной базы с картографическим ПО, гибкого управления выводом и отображением данных на карте, проведения аналитических исследований и оформления их результатов в виде отчетов, презентаций и т.п. Для оптимизации принятия управленческих и стратегических решений (оперативных и прогнозных), повышение эффективности рабочего процесса и управления персоналом в самом широком спектре отраслей, видов бизнеса и сфер деятельности. Особенно для сетевых структур, рекламных и страховых фирм, финансовых и строительных организаций, охранных служб и контролирующих органов и т.д.

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

Проконсультироваться, купить или заказать MosMap Marker:
Телефон:   (495) 542-01-49        E-mail:  mosmap@mosmap.ru
Skype: mosmap        ICQ:  6799591
Написать или запросить звонок на сайте:  Обратная связь

Привязка точек к карте
(привязка объектов, адресов, описаний, информации)

Под привязкой точек к карте следует понимать возможность отображения данных на карте, как точечных объектов с характеристиками, описанием и т.п.

Итак, любые необходимые данные вы сможете ввести в программу с клавиатуры, использовать готовые или закачать из вашей базы (например, из файла Excel). Присвоить каждому добавленному вручную объекту нужные характеристики, свойства, отличительные признаки и т.п.

При импорте из таблицы привязка точек к карте производится автоматически.

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

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

Итак, когда привязка точек к карте по адресам и координатам завершена, практически в программе всё готово для работы по проведению количественного и качественного анализа контролируемых вами данных в географическом аспекте.

Фильтры, поисковые функции

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

    Вы получаете возможность работы со своей базой данных с помощью мощной системы фильтров. Она позволит вам сортировать и делать выборки по широкому набору критериев. Причем, не только по программным (встроенный список критериев), а и по присвоенным вами характеристикам:

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

Проконсультироваться, купить или заказать ГИС программу:
Телефон:   (495) 542-01-49        E-mail:  mosmap@mosmap.ru
Skype: mosmap        ICQ:  6799591
Написать или запросить звонок на сайте:  Обратная связь

Выделение на карте районов и произвольных зон

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

Задав нужные параметры в программе, вы сможете автоматически сгруппировать близлежащие точки в произвольное количество сегментов. И здесь нам крайне необходимо наглядное отображение данных на карте. Например, для того, чтобы распределить зоны ответственности для нескольких сотрудников. Обозначить зоны обслуживания, находящиеся в шаговой доступности. Зоны расположения, районы скопления, сосредоточения чего или кого-либо.

Выделение на карте зон – как раз та самая «палочка-выручалочка»! Эта функция позволяет не только выделять определенные области (страны, регионы, города, районы и т.п.). Можно обозначать свои произвольные участки и задавать их окрашивание в различные цвета для отображения данных на карте в зависимости от характеристик, назначения, свойств, атрибутов…

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

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

  • Отметить точки на карте Москвы, другого города или местности.
  • Осуществить выделение на карте зон сосредоточения меток, обладающих конкретными признаками.
  • Для обеспечения наглядности отображения, окрасить эти районы или их границы.
  • Сохранить полученные результаты в виде файлов стандартных графических форматов (jpeg, bmp).
  • Вывести на печать, например, для проведения презентации или подшивки в аналитический отчет.

Программа аналитической работы с картами

Создание меток на карте с заранее заданными свойствами открывает широкие перспективы для аналитики.

Можно отметить на карте любые точки (свои, конкурентов или общего назначения). Гибкая и удобная поисковая система программы для работы с картами позволит вам сделать отбор меток по одному или группе различных параметров.
Таким образом, вы получите отображение данных на карте, которые вам необходимо в данный момент. Например, вывести на карту все метки определенного типа, расположенные только в выбранных вами районах или произвольно заданных территориях. Далее вы можете сделать цветовое выделение на карте районов, содержащих точки с нужными признаками, места расположения чего-либо, зоны происшествия событий и др.

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

Проанализировать взаимное расположение и локализовать районы повышенной активности происшествий, явлений, событий.

Динамический анализ во времени тоже возможен! Например, оценить динамику изменения цен (на продукты, услуги, за квадратный метр жилой и не жилой недвижимости и т.п.) и количества продаж. Выполнить работу по оценке прироста количества клиентов в различных районах за период проведения рекламных кампаний. И многое другое…

В конце и на любой стадии аналитической работы с картами можно вывести отобранные данные в Excel и Word. А также, можно сформировать файл с нужным фрагментом карты с нанесенными на неё метками для печати.

Как видите, программа для работы с картами MosMap Marker – необходимый инструмент планирования и анализа в самом широком спектре отраслей и бизнесов.

Проконсультироваться, купить или заказать ГИС программу:
Телефон:   (495) 542-01-49        E-mail:  mosmap@mosmap.ru
Skype: mosmap        ICQ:  6799591
Написать или запросить звонок на сайте:  Обратная связь

Метка — Технологии Яндекса

В этой заметке я рассмотрю вопрос о том, как добавить маркер для обозначения точки на карту.

В предыдущих заметках мы получили вид простейшей карты и добавили на неё элементы управления .

В результате у нас получился следующий код:

<!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» /> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/1578.jpg» type=»text/javascript»></script> <script type=»text/javascript» charset=»utf-8″> var map; function init () { map = new YMaps.Map(document.getElementById(«YMapsID»)); map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13, YMaps.MapType.MAP); map.addControl(new YMaps.TypeControl()); map.addControl(new YMaps.ToolBar()); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.MiniMap()); map.addControl(new YMaps.ScaleLine()); } </script> </head> <body onload=»init();»> <div id=»YMapsID» style=»height:400px; width:600px;»></div> </body> </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» /> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/1578.jpg» type=»text/javascript»></script> <script type=»text/javascript» charset=»utf-8″> var map; function init () { map = new YMaps.Map(document.getElementById(«YMapsID»)); map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13, YMaps.MapType.MAP); map.addControl(new YMaps.TypeControl()); map.addControl(new YMaps.ToolBar()); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.MiniMap()); map.addControl(new YMaps.ScaleLine()); } </script> </head> <body onload=»init();»> <div id=»YMapsID» style=»height:400px; width:600px;»></div> </body> </html>

Теперь мы добавим маркер на карту для обозначения объекта, например, отметим на карте Нижнего Новгорода, где находиться театр оперы и балета им. А.С. Пушкина.

Для начала нужно узнать координаты.

Это можно сделать, используя сервис определения координат, расположенный по адресу  http://api.yandex.ru/maps/tools/getlonglat.xml

Введя в строку поиска адрес: Нижний Новгород, Белинского ул., д. 59, мы получим искомые координаты в формате «долгота, широта» 44.017152,56.315455

Для добавления маркера на карту нужно в наш код добавить три строчки:

var point = new YMaps.GeoPoint(44.017152,56.315455);

var placemark = new YMaps.Placemark(point);

map.addOverlay(placemark);

В первой строке мы задаем координаты точки для маркера.

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

Третья строка добавляет метку на карту.

Метки интерактивны, по ним можно щелкать мышью и передвигать.

По умолчанию метки ожидают событие «click», по которому слушатели событий могут, например, показать балун (информационное окно).

Полный код примера:

<!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» /> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/1578.jpg» type=»text/javascript»></script> <script type=»text/javascript» charset=»utf-8″> var map; function init () { map = new YMaps.Map(document.getElementById(«YMapsID»)); map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13, YMaps.MapType.MAP); map.addControl(new YMaps.TypeControl()); map.addControl(new YMaps.ToolBar()); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.MiniMap()); map.addControl(new YMaps.ScaleLine()); var point = new YMaps.GeoPoint(44.017152,56.315455); var placemark = new YMaps.Placemark(point); map.addOverlay(placemark); } </script> </head> <body onload=»init();»> <div id=»YMapsID» style=»height:400px; width:600px;»></div> </body> </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» /> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/1578.jpg» type=»text/javascript»></script> <script type=»text/javascript» charset=»utf-8″> var map; function init () { map = new YMaps.Map(document.getElementById(«YMapsID»)); map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13, YMaps.MapType.MAP); map.addControl(new YMaps.TypeControl()); map.addControl(new YMaps.ToolBar()); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.MiniMap()); map.addControl(new YMaps.ScaleLine()); var point = new YMaps.GeoPoint(44.017152,56.315455); var placemark = new YMaps.Placemark(point); map.addOverlay(placemark); } </script> </head> <body onload=»init();»> <div id=»YMapsID» style=»height:400px; width:600px;»></div> </body> </html>

Загрузив данную страницу в браузере мы увидим

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

Значок состоит из нескольких наложенных друг на друга изображений.

Для создания значка необходимо задать изображение значка, его размер и его смещение относительно позиции метки.

Простейшие значки создаются на основе стандартных стилей, встроенных в API.

Для значков предусмотрены различные цветовые решения.

Некоторые простейшие значки встроенные в API Яндекс.Карт:

default#whitePoint

default#greenPoint

default#redPoint

default#yellowPoint

default#darkbluePoint

default#nightPoint

default#greyPoint

default#bluePoint

default#orangePoint

default#darkorangePoint

default#pinkPoint

default#violetPoint

В значок метки можно помещать текстовое содержимое.

Стандартные значки меток растягиваются по ширине и высоте в зависимости от содержимого.

Значок растягивается до определенного значения, которое прописано как значение по умолчанию.

С помощью метода setIconContent() можно изменять содержимое значка метки

Например, placemark.setIconContent(«Театр оперы и балета»);

Для метки можно задать и собственный значок.

Это делается с помощью класса YMaps.IconStyle.

Для создания нового значка необходимо создать новый стиль с помощью конструктора класса YMaps.Style.

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

Также может понадобиться задание стиля для тени значка.

После этого его можно использовать.

Для примера создадим значок для обозначения тетра.

var s = new YMaps.Style(); — определяем стиль

s.iconStyle = new YMaps.IconStyle();

s.iconStyle.offset = new YMaps.Point(-15, -15); — определяем смещение значка от местоположения точки токки

s.iconStyle.href = «files/theater.png»; — файл с изображением значка

s.iconStyle.size = new YMaps.Point(30, 30); — задаем размер значка

Изменяем строку var placemark = new YMaps.Placemark(point);

добавляем созданный стиль

var placemark = new YMaps.Placemark(point, {style: s});

Изменим также центр карты

map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 15, YMaps.MapType.MAP);

Загружаем измененную страницу в браузере

Полный код с исправлениями

<!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» /> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/1578.jpg» type=»text/javascript»></script> <script type=»text/javascript» charset=»utf-8″> var map; function init () { map = new YMaps.Map(document.getElementById(«YMapsID»)); map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 13, YMaps.MapType.MAP); var s = new YMaps.Style(); s.iconStyle = new YMaps.IconStyle(); s.iconStyle.offset = new YMaps.Point(-15, -15); s.iconStyle.href = «files/theater.png»; s.iconStyle.size = new YMaps.Point(30, 30); map.addControl(new YMaps.TypeControl()); map.addControl(new YMaps.ToolBar()); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.MiniMap()); map.addControl(new YMaps.ScaleLine()); var point = new YMaps.GeoPoint(44.017152,56.315455); var placemark = new YMaps.Placemark(point, {style: s}); map.addOverlay(placemark); } </script> </head> <body onload=»init();»> <div id=»YMapsID» style=»height:400px; width:600px;»></div> </body> </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» /> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/1578.jpg» type=»text/javascript»></script> <script type=»text/javascript» charset=»utf-8″> var map; function init () { map = new YMaps.Map(document.getElementById(«YMapsID»)); map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 13, YMaps.MapType.MAP); var s = new YMaps.Style(); s.iconStyle = new YMaps.IconStyle(); s.iconStyle.offset = new YMaps.Point(-15, -15); s.iconStyle.href = «files/theater.png»; s.iconStyle.size = new YMaps.Point(30, 30); map.addControl(new YMaps.TypeControl()); map.addControl(new YMaps.ToolBar()); map.addControl(new YMaps.Zoom()); map.addControl(new YMaps.MiniMap()); map.addControl(new YMaps.ScaleLine()); var point = new YMaps.GeoPoint(44.017152,56.315455); var placemark = new YMaps.Placemark(point, {style: s}); map.addOverlay(placemark); } </script> </head> <body onload=»init();»> <div id=»YMapsID» style=»height:400px; width:600px;»></div> </body> </html>

Подробнее узнать о добавлении меток на карту можно по адресу http://api.yandex.ru/maps/jsapi/doc/dg/tasks/how-to-add-placemark.xml

Как добавить в google maps и яндекс карты маркер что бы все видели

Новые Яндекс. Карты, которые каждый теперь может поправить

Несколько своих стилизованных меток на Яндекс карте

Добавляем маркер на карту используя API Яндекс. Карт

Метка и балун-панель — JavaScript API Яндекс. Карт

Как изменить значок маркера в Yandex maps? Drupal

В данном примере я расскажу Вам как вывести Яндекс Карту 2.1 и отловить событие click получив координаты щелчка.

Вначале подгружаем карту:

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/55379.jpg» type=»text/javascript»></script>

И так код вывода карты и добавление события click — при котором на карте появляется балун с текстом  Местонахождение отмечено…  и заполняется поле GPS координаты:

«<div class=»left»>»._GEOGPS.»:</div><div class=»center»> <script type=»text/javascript»> ymaps.ready(init); function init() { myMapGeo = new ymaps.Map(‘YMapsIDgeopoint’, { center: [55.600852, 36.46187], zoom: 14, controls: [‘zoomControl’, ‘searchControl’, ‘typeSelector’, ‘geolocationControl’] }); myMapGeo.events.add(‘click’, function (e) { var coords = e.get(‘coords’); $(‘#geopoint’).val( [coords[0].toPrecision(6), coords[1].toPrecision(6)].join(‘, ‘) ); myMapGeo.balloon.open(coords, ‘Местонахождение отмечено!<br><sup>Вы можете закрыть и выбрать другое местоположение.</sup>’); }); } </script> <div id=»YMapsIDgeopoint» style=»width:100%; height:300px;»></div> <input type=»text» id=»geopoint» name=»geopoint» placeholder=»GPS координаты» value=»».$geopoint.»» maxlength=»80″ size=»65″ class=»validate[required,custom[inputgps]] text-input» «> </div>»

Не забудьте подключить JQuery!

Результат:

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

Закрыть меню