Необходимо было для клиента создать точную копию Яндекс карты для сайта, но с увеличенным радиусом. Так как предыдущая карта была создана другими разработчиками, доступа к данным для редактирования нет.
Чтобы осуществить задуманное, было выбранно решение создать карту для сайта с использованием Яндекс API Карт, так как этот вариант позволяет делать с картой всё, что угодно.
Документация JavaScript API от Яндекс: https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/load-docpage/
Создание Яндекс API в кабинете разработчика
Для того, чтобы работать с Яндекс API необходимо получить для вашего проекта собственный ключ. Получить ключ можно в кабинете разработчика
После получения ключа в документации можно взять сниппет кода и для тестирования вставить его. Данный код я выложил ниже. В нём указаны координаты Москвы. В него вам необходимо добавить API-ключ в ссылку <script> и вызвать контейнер <div> у вас на сайте в месте, где хотите, чтобы отображалась ваша карта.
Код для тестирования с координатами Москвы:
<script src="https://api-maps.yandex.ru/2.1?apikey=<ваш API-ключ>&load=package.full&lang=ru_RU">
</script>
<script type="text/javascript">
ymaps.ready(function () {
var myMap = new ymaps.Map("YMapsID", {
center: [55.76, 37.64],
zoom: 10
});
});
</script>
// Формирование div-контейнер карты.
<div id="YMapsID" style="width: 450px; height: 350px;"></div>Если тестовая карта загрузилась на сайт, значит можно искать свои координаты и добавлять их в код.
Как узнать ваши координаты
Заходим в Яндекс и пишем в поиск необходимый адрес
Код с нашими тестовыми данными получается следующий
Проверяем карту на сайте. Координаты работают.
Так как мы переделываем сайт, нам нужна практически точная копия оригинала. Почему нельзя просто скопировать с предыдущего сайта? Потому что связи с прошлыми разработчиками нет, а нам нужно внести корректировки от клиента.
Из технического задания радиус оказания услуг применить необходимо следующий:
Идём на страницу геообъектов: https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/geoobjects-docpage/
Добавляем тип геометрии, ещё раз координаты и радиус от нашей точки:
Вот что получилось на сайте с картой после обновления кода:
Зелёный цвет нас не устраивает. Такое ощущение, как будто я смотрю Яндекс Погоду и сейчас в этом месте идёт дождь. Сделаем как и на оригинале — зелёный.
Добавили к координатам:
- цвет заливки с прозрачностью (55 в цвете),
- цвет контура,
- толщину контура,
- прозрачность.
{
fillColor: "#91D57D55",
strokeColor: "#91D57D",
strokeOpacity: 0.8,
strokeWidth: 5
}Добавляем баллун на карту и иконку, чтобы было понятно, где действительно находится наш адрес:
.add(new ymaps.Placemark([55.694843, 37.435023], {
balloonContent: 'текст внутри',
iconCaption: 'текст снаружи'
}, {
preset: 'islands#greenDotIconWithCaption'
}))Этот код является продолжением вывода нашего объекта:
myMap.geoObjects
.add(myCircle)
.add(new ymaps.Placemark . . .
Вот собственно и всё. Карта готова.
Иконка с описанием:
Баллун — текст внутри открывается при нажатии:
Если вам такие сложности не нужны, можно воспользоваться конструктором карт: https://yandex.ru/map-constructor/
У меня красиво нарисовать круг там не получилось, поэтому и принял решение сделать всё через API.
А ещё один из плюсов, что всю эту карту удобно редактировать. Надо сделать радиус круга побольше? Пожалуйста! 48км от точки:
