Клуб API Карт

Делаем зоны доставки в интернет-магазине (инструкция)

vaddoo
27 апреля 2011, 21:50

На днях ко мне обратился один мой знакомый, который владеет небольшим интеренет-магазином. Ему на Яндекс.Маркете понаставили единиц в рейтинг. Помочь с повышением рейтинга, естественно, я не смог. Однако вникнув в проблему и почитав комментарии понял, что его покупатели жалуются на отсутствие внятной ценовой политики на доставку товаров. В разделе о доставке было совсем непонятно, какова ее стоимость, и покупатели удивлялись, когда им называли дополнительный ценник.


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


Как это сделать?

Делается все быстро, а главное просто! Для начала нужно зайти на
Яндекс.Карты, авторизоваться и перейти в Мои карты. Здесь в левой
колонке есть ссылка «Создать новую карту»

Теперь можно добавлять на карту информацию: метки, линии, полигоны.

Теперь самое сложно – ответить честно на вопрос, какие же на самом деле условия доставки в магазине. Выяснилось, что в пределах МКАД (не путайте с границей Москвы) товары доставляются бесплатно, а за город – 30 руб. за км. Но и это не все. Оказывается, есть еще и предел дальности – дальше Малого Московского кольца («бетонки») товар не повезут.

Отлично! Условия устаканили, начинаем рисовать!

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

Выбираем цвет метки и сохраняем. Дальше нам нужно указать сами зоны. Жмем «Добавить многоугольник» и начинаем рисовать первую зону по МКАДу. Не волнуйтесь, если сделаете ошибку, этот многоугольник всегда можно поправить.

По окончанию нажмите «готово» и можно переходить а настройкам полигона. В название пишем «Доставка в пределах МКАД», в описание «бесплатно».

Теперь нужно настроить внешний вид полигона: нажимайте «Стиль многоугольника». Я поставил голубой цвет заливки и контура, максимальную прозрачность, и тонкую контурную линию.

Вот, что получается:

Теперь нужно нарисовать вторую зону, которая будет обозначать платную доставку в пределах от МКАДа и до Малого Московского кольца. Тут есть маленькая хитрость – нужно сделать полигон с внутренней геометрией, проще говоря плигон с дыркой (он же «бублик»). Тут придется немного схитрить и сделать полигон в форме буквы «С» и сомкнуть концы фигуры. Представьте, что вы начали движение по МКАДу от Киевского шоссе по внешней стороне, проехали круг, выехали на Малое кольцо, проехали круг по его внутренней стороне и вернулись на МКАД по тому же Киевскому шоссе. Так и будем рисовать. Вот как это происходило:




Теперь немного настроек и комментариев. Пишем «Доставка за МКАД: 30 руб. за 1 км. пути», настраиваем цвет, прозрачность и т.д. Получаем вот такую красивую картинку.

Теперь нужно сохранить результат. В левой колонке вписываем название карты, например «Зоны доставки». Обязательно нужно указать, что карта доступна всем! Иначе никто, кроме вас, ее не увидит. После сохраняем.

Теперь нужно разместить эту карту на сайте. Для этого вам понадобится ссылка на YMApsML файл. Раздобыть ее можно здесь же, нажав на «Ссылка на эту карту»:

Вот ссылка на получившийся файл: http://maps.yandex.ru/export/usermaps/ae80smGy4bg-ycFy1HK3rn9JjFgnYPXc/
Теперь идем в документацию API, в примеры использования YMapsML файлов, выбираем подходящий пример, копируем код примера и вставляем в нужные места ключ для своего сайта и ссылку на нужный YMapsML-файл.
У меня получилось так:
 
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=AFZWkEoBAAAA4UifEwIAuXP8hi1WKwx8AE8v2VuQM54jsEMAAAAAAAAAAABeUGe-P7693AgOm18LhuPLLh-b8w==" type="text/javascript"></script>
<script type="text/javascript">
    // Создание обработчика для события window.onLoad
    YMaps.jQuery(function () {
        // Создание экземпляра карты и его привязка к созданному контейнеру
        var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]

        // Создание и добавление YMapsML-документа на карту
        var ml = new YMaps.YMapsML('http://maps.yandex.ru/?um=ae80smGy4bg-ycFy1HK3rn9JjFgnYPXc&l=map'
        map.addOverlay(ml);

        // Обработчик успешной загрузки YMapsML
        YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
            // Скрываем текст "Загрузка карты..."
            YMaps.jQuery("#loader").css("display", "none");
            // Начальная инициализация карты
            map.setBounds(ml.view.boundedBy);
        }
        // Обработчик неудачной загрузки YMapsML
        YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
            YMaps.jQuery("#loader").html('<span style="color:red">Ошибка при загрузке YMapsML: ' + error + '</span>');
        }
    }
</script>

В код страницы добавляем:
 
<div id="YMapsID" style="width:600px;height:400px">
    <div id="loader" style="position:absolute;z-index:2;top:45%;width:100%;text-align:center">Загрузка карты...</div>
</div>

И в итоге получаем вот такую страницу про доставку товара: http://sleepymall.ru/delivery/

Обратите внимание на то, что вы можете в любой момент отредактировать эту карту в разделе «Мои карты» на Яндексе и эти изменения тут же попадут на ваш сайт. Так что если условия доставки в магазине изменятся, даже не придется изменять код!

 

UPD: как сделать собственные метки - http://clubs.ya.ru/mapsapi/replies.xml?item_no=2566

5 комментариев
Подписаться на комментарии к посту

это здорово!

а можно ли там какимто-образом выделять расстояние с учетом улиц?

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

в пределах города разумеется.

Почитайте вот эту страничку: http://api.yandex.ru/maps/solutions/?p=shop

Тут много по теме :)

Очень полезно. 

Только вот такой вопрос: а если нужно для каждой зоны сделать несколько вариантов? Например, в зависимости в кол-ва. 

Вариант "записать все в балун" не подходит ))

Несколько вариантов чего?

Как получить ссылку на YMapsML-файл в новом Конструкторе карт?