API яндекс карт

[ZverBlin]

Необходимо реализовать API яндекс карту

https://tech.yandex.ru/maps/

ТЗ

Яндекс карта с отметками заводов на карте

Поля выбора:
1)Марки бетона

2)Количества

3)Поле ввода адреса доставки

 

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

Выводить цену бетона, цену доставки, итоговую стоимость, расстояние в км

 

*Учитывать, что каждый завод может иметь свои цены на бетон и доставку.

 

Примеры

http://www.beton-morton.ru/kalkulyator3/

http://www.transbeton.ru/calc/

 

Писать в ЛС

Либо скайп monsterbeats-tour

[ashap]

скорее вот https://opencartforum.com/files/file/1130-доставка-в-зависимости-от-расстояния-рассчет-к/

и допилы

[ashap]

вообщем их нужно спарить)))

[ZverBlin]

мне не нужно на опенкарт, мне надо для лендинга и для wordpressA

т.е просто работающий скрипт без модулей и т.д чтоб работал везде

[ZverBlin]

тогда тебе сюда

https://tech.yandex.ru/maps/

 

я бы сказал сюда https://tech.yandex.ru/maps/jsbox/2.1/

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

Времени нет на это дело и надо координаты точек в карте прописывать чтобы они отображались

[ZverBlin]

<div class="text">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script src="http://api-maps.yandex.ru/2.0/index.xml?load=package.full&onload=init&lang=ru-RU&key=AKxh1VEBAAAA1AfPZwIAlP4oNwMlGkVDG9YVa47Upqm4ZxMAAAAAAAAAAACaG2kMzaTSwxHNx-jcPIw5ZSqeKw==" type="text/javascript"></script>

<script language="JavaScript">

var myMap;

var dost;

var cities = new Array();

$("#zakbut").hide();

function init() {

ymaps.geocode([55.640868,37.382591], { results: 1 }).then(function (res) {

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

var firstGeoObject = res.geoObjects.get(0),

// Создаем карту с нужным центром.

myMap = new ymaps.Map("YMapsID", {

center: firstGeoObject.geometry.getCoordinates(),

zoom: 11

});

myMap.container.fitToViewport();

// Создаем метку с помощью вспомогательного класса.

var myPlacemark1 = new ymaps.Placemark(firstGeoObject.geometry.getCoordinates(), {

iconContent: '1',

balloonContent: 'Это мы',

hintContent: 'Это мы'

}, {

// Опции.

// Стандартная фиолетовая иконка.

preset: 'twirl#violetIcon'

});

myMap.geoObjects.add(myPlacemark1)

}, function (err) {

// Если геокодирование не удалось, сообщаем об ошибке.

alert(err.message);

});

cities[0] = "Апрелевка";

cities[1] = "Балашиха";

cities[2] = "Бронницы";

cities[3] = "Верея";

cities[4] = "Видное";

cities[5] = "Волоколамск";

cities[6] = "Воскресенск";

cities[7] = "Высоковск";

cities[8] = "Дедовск";

cities[9] = "Дзержинский";

cities[10] = "Дмитров";

cities[11] = "Долгопрудный";

cities[12] = "Дрезна";

cities[13] = "Домодедово";

cities[14] = "Дубна";

cities[15] = "Егорьевск";

cities[16] = "Железнодорожный";

cities[17] = "Жуковский";

cities[18] = "Зарайск";

cities[19] = "Зеленоград";

cities[20] = "Ивантеевка";

cities[21] = "Истра";

cities[22] = "Кашира";

cities[23] = "Климовск";

cities[24] = "Клин";

cities[25] = "Коломна";

cities[26] = "Королев";

cities[27] = "Котельники";

cities[28] = "Красноармейск";

cities[29] = "Красногорск";

cities[30] = "Краснозаводск";

cities[31] = "Краснознаменск";

cities[32] = "Куровское";

cities[33] = "Ликино-Дулево";

cities[34] = "Лобня";

cities[35] = "Лосино-Петровский";

cities[36] = "Луховицы";

cities[37] = "Лыткарино";

cities[38] = "Люберцы";

cities[39] = "Можайск";

cities[40] = "Москва";

cities[41] = "Мытищи";

cities[42] = "Наро-Фоминск";

cities[43] = "Ногинск";

cities[44] = "Одинцово";

cities[45] = "Ожерелье";

cities[46] = "Озеры";

cities[47] = "Орехово-Зуево";

cities[48] = "Павловский Посад";

cities[49] = "Подольск";

cities[50] = "Протвино";

cities[51] = "Пушкино";

cities[52] = "Пущино";

cities[53] = "Раменское";

cities[54] = "Реутов";

cities[55] = "Руза";

cities[56] = "Рошаль";

cities[57] = "Сергиев Посад";

cities[58] = "Серпухов";

cities[59] = "Солнечногорск";

cities[60] = "Ступино";

cities[61] = "Сходня";

cities[62] = "Талдом";

cities[63] = "Троицк";

cities[64] = "Фрязино";

cities[65] = "Химки";

cities[66] = "Хотьково";

cities[67] = "Черноголовка";

cities[68] = "Чехов";

cities[69] = "Шатура";

cities[70] = "Щербинка";

cities[71] = "Щёлково";

cities[72] = "Электрогорск";

cities[73] = "Электросталь";

cities[74] = "Электроугли";

cities[75] = "Юбилейный";

cities[76] = "Яхрома";

}

function findPartial( a, s )

{

for( var i = 0; i < a.length; ++i )

{

if( a.toLowerCase().indexOf( s.toLowerCase() ) >= 0 ) $("#ccs").html( $("#ccs").html() + "<a href=JavaScript:addcity('"+i+"')>" + cities + "</a><br>");

}

}

function addcity(val)

{

$("#addr").val(cities[val]);

$("#ccs").html("");

}

function citysearch()

{

$("#ccs").html("");

$("#cost").html("");

if ($("#addr").val().length>0) findPartial( cities, $("#addr").val() );

}

function calculate()

{

$("#cnt").val($("#cnt").val().replace(",","."));

$("#zakbut").hide();

$("#YMapsID").html("");

myMap = new ymaps.Map("YMapsID", {

center: [55.64, 37.38],

zoom: 10

});

ymaps.route([[55.640868,37.382591],''+$("#addr").val()+''], { mapStateAutoApply: true }).then(function (route) {

route.getPaths().options.set({

strokeColor: '0000ffff',

opacity: 0.9

});

myMap.geoObjects.add(route);

if (route.getLength()/1000>=200)

{

$("#cost").html("<font color='red'><b>Доставка осуществляется только в пределах Московской области</b></font>");

return;

}

if (route.getLength()/1000<=50) dost = 650;

if (route.getLength()/1000<=40) dost = 600;

if (route.getLength()/1000<=30) dost = 550;

if (route.getLength()/1000<=25) dost = 500;

if (route.getLength()/1000<=20) dost = 450;

if (route.getLength()/1000<=15) dost = 400;

if (route.getLength()/1000<=10) dost = 350;

if (route.getLength()/1000<=5) dost = 300;

if (route.getLength()/1000>50)

{

$("#cost").html("<b>Расстояние:</b>: ~" + Math.ceil(route.getLength()/1000) + " км. <br/> <b>Стоимость доставки:</b> на расстояния, превышающие 50 км цена договрная");

}

else

{

$("#zakbut").show();

if ($("#cnt").val()<8)

{

var sum = $("#marka").val()*Math.round($("#cnt").val()) + dost*8;

}

else

{

sum = $("#marka").val()*Math.round($("#cnt").val()) + dost*Math.round($("#cnt").val());

}

$("#cost").html("<b>Марка бетона</b>: "+$("#marka :selected").text()+" <br /><b>Объем</b>: "+$("#cnt").val()+" куб.м. <br /><b>Расстояние:</b> ~" + Math.ceil(route.getLength()/1000) + " км. <br/> <b>Стоимость бетона с учетом доставки:</b> " + sum +" руб.");

}

});

}

function zakaz()

{

$("#onzaktext").html("Марка бетона: "+$("#marka :selected").text()+"\nОбъем: "+$("#cnt").val()+" куб.м.\nАдрес: "+$("#addr").val());

$("#onzaktext").css("border", "2px solid #049800");

}

</script>

<table class="main" cellpadding="0" cellspacing="0">

<tbody>

<tr valign="top">

<td class="left" colspan="2">

<p class="tx5">

<b>Рассчитать стоимость бетона с учетом доставки:</b>

</p>

</td>

</tr>

<tr>

<td class="left">Марка бетона</td>

<td class="left">

<select name="marka" id="marka" style="width:200px;">

<option value="2600">М100 В7,5 (гравий)</option>

<option value="2800">М100 В7,5 (гранит)</option>

<option value="2700">М150 В12,5 (гравий)</option>

<option value="2900">М150 В12,5 (гранит)</option>

<option value="2800">М200 В15 (гравий)</option>

<option value="3000">М200 В15 (гранит)</option>

<option value="3000">М250 В20 (гравий)</option>

<option value="3150">М250 В20 (гранит)</option>

<option value="3150">М300 В22,5 (гравий)</option>

<option value="3300">М300 В22,5 (гранит)</option>

<option value="3300">М350 В25 (гравий)</option>

<option value="3450">М350 В25 (гранит)</option>

<option value="3450">М400 В30 (гравий)</option>

<option value="3650">М400 В30 (гранит)</option>

<option value="3750">М450 В35 (гравий)</option>

<option value="3900">М450 В35 (гранит)</option>

<option value="2390">М 100 (тощий бетон)</option>

<option value="2540">М 150 (тощий бетон)</option>

<option value="2690">М 200 (тощий бетон)</option>

<option value="2350">М 100 (Раствор)</option>

<option value="2450">М 150 (Раствор)</option>

<option value="2550">М 200 (Раствор)</option>

<option value="2750">М 250 (Раствор)</option>

</select>

</td>

</tr>

<tr>

<td class="left">Количество</td>

<td class="left"><input name="cnt" id="cnt" type="text"> куб.м</td>

</tr>

<tr>

<td class="left" valign="top">Адрес доставки</td>

<td class="left"><input name="addr" id="addr" onkeyup="citysearch()" style="width:200px;" type="text"><br>

<font color="#CCCCCC" size="2">cтрана, область, район, город, улица,<br> дом в вольной форме</font></td>

</tr>

<tr>

<td class="left"></td>

<td class="left">

<div id="ccs"></div>

</td>

</tr>

<tr>

<td class="left" colspan="2">

<input value="Рассчитать" onclick="calculate()" type="button"> 

<input value="Заказать" onclick="zakaz()" id="zakbut" style="display:none" type="button">

</td>

</tr>

<tr>

<td class="left" colspan="2">

<div id="cost" style="margin-top:5px; margin-bottom:5px"></div>

</td>

</tr>

<tr>

<td class="left" colspan="2">

<div id="YMapsID" style="width:480px;height:400px;"><ymaps style="z-index: 0; width: 480px; height: 400px;" class="ymaps-map ymaps-i-ua_js_yes"><ymaps unselectable="on" style="z-index: 500; position: absolute; width: 480px; height: 400px; left: 0px; top: 0px; -moz-user-select: none; cursor: url("http://api-maps.yandex.ru/2.0.39/release/../images/ef50ac9e93aaebe3299791c79f277f8e.cur") 16 16, url("http://api-maps.yandex.ru/2.0.39/release/../images/ef50ac9e93aaebe3299791c79f277f8e.cur"), move;" class="ymaps-glass-pane ymaps-events-pane"></ymaps><ymaps style="z-index: 100; position: absolute; left: 240px; top: 200px;" class="ymaps-layers-pane"><ymaps style="z-index: 150; position: absolute; transform: translate3d(0px, 0px, 0px) scale(1, 1);"><ymaps style="position: absolute; transform: translate3d(0px, 0px, 0px) scale(1, 1); left: 0px; top: 0px;"><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec04.maps.yandex.net/tiles?l=map&v=4.28.0&x=1235&y=641&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: -426px; top: -557px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec03.maps.yandex.net/tiles?l=map&v=4.28.0&x=1235&y=642&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: -426px; top: -301px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec04.maps.yandex.net/tiles?l=map&v=4.28.0&x=1235&y=643&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: -426px; top: -45px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec03.maps.yandex.net/tiles?l=map&v=4.28.0&x=1235&y=644&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: -426px; top: 211px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec02.maps.yandex.net/tiles?l=map&v=4.28.0&x=1236&y=641&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: -170px; top: -557px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec01.maps.yandex.net/tiles?l=map&v=4.28.0&x=1236&y=642&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: -170px; top: -301px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec02.maps.yandex.net/tiles?l=map&v=4.28.0&x=1236&y=643&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: -170px; top: -45px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec01.maps.yandex.net/tiles?l=map&v=4.28.0&x=1236&y=644&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: -170px; top: 211px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec04.maps.yandex.net/tiles?l=map&v=4.28.0&x=1237&y=641&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: 86px; top: -557px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec03.maps.yandex.net/tiles?l=map&v=4.28.0&x=1237&y=642&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: 86px; top: -301px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec04.maps.yandex.net/tiles?l=map&v=4.28.0&x=1237&y=643&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: 86px; top: -45px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec03.maps.yandex.net/tiles?l=map&v=4.28.0&x=1237&y=644&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: 86px; top: 211px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec02.maps.yandex.net/tiles?l=map&v=4.28.0&x=1238&y=641&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: 342px; top: -557px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec01.maps.yandex.net/tiles?l=map&v=4.28.0&x=1238&y=642&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: 342px; top: -301px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec02.maps.yandex.net/tiles?l=map&v=4.28.0&x=1238&y=643&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: 342px; top: -45px;"></ymaps><ymaps unselectable="on" style="opacity: 1; background-size: 100% 100%; position: absolute; -moz-user-select: none; background-image: url("http://vec01.maps.yandex.net/tiles?l=map&v=4.28.0&x=1238&y=644&z=11&scale=1&lang=ru_RU"); width: 256px; height: 256px; left: 342px; top: 211px;"></ymaps></ymaps></ymaps></ymaps><ymaps style="z-index: 1000; position: absolute;" class="ymaps-copyrights-pane"><ymaps><ymaps class="ymaps-copyrights-logo"><ymaps class="ymaps-logotype-div"><a href="http://maps.yandex.ru/?origin=jsapi&ll=37.382591,55.640868&z=11&l=map" target="_blank" class="ymaps-logo-link ymaps-logo-link-ru"><ymaps class="ymaps-logo-link-wrap"></ymaps></a></ymaps></ymaps><ymaps class="ymaps-copyrights-legend"><ymaps class="ymaps-copyright-legend-container"><ymaps class="ymaps-copyright-legend"><ymaps class="ymaps-copyright-legend-element ymaps-copyright-legend-element-black"><ymaps style="display: inline;">© Яндекс</ymaps></ymaps></ymaps><ymaps class="ymaps-copyright-agreement ymaps-copyright-agreement-black"><ymaps class="ymaps-copyrights-ua-extended"><ymaps><a href="http://maps.yandex.ru/?ll=37.382591,55.640868&z=11&origin=jsapi&fb" target="_blank">Ошибка на карте?</a> · </ymaps></ymaps><a target="_blank" href="http://legal.yandex.ru/maps_termsofuse/?lang=ru">Условия использования</a></ymaps></ymaps></ymaps></ymaps></ymaps><ymaps style="z-index: 600; position: absolute; left: 240px; top: 200px;" class="ymaps-overlay-stepwise-pane"><ymaps unselectable="on" style="position: absolute; height: 0px; width: 0px; -moz-user-select: none; left: 0px; top: 0px; z-index: 650;" class="ymaps-point-overlay"><ymaps><ymaps class="ymaps-image-with-content" style="position: absolute; left: -10px; top: -40px; width: 37px; height: 42px; background-position: 0px 0px; background-size: 37px 42px; background-image: url("http://api-maps.yandex.ru/2.0.39/release/../images/d667d1017f473e7812cb2c8ea22e02e0.png");"><ymaps class="ymaps-image-with-content-content" style="font: 13px Arial,sans-serif;position: absolute;text-align: center;left: 6px;top: 6px;width: 16px;height: 16px;"><ymaps id="id_142468760927036184_0"><ymaps>1</ymaps></ymaps></ymaps></ymaps></ymaps></ymaps></ymaps></ymaps></div>

</td>

</tr>

</tbody>

</table>

</div>

[ZverBlin]

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

 

скрипт установок точек

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10
        }),

    // Создаем геообъект с типом геометрии "Точка".
        myGeoObject = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.8, 37.8]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'Я тащусь',
                hintContent: 'Ну давай уже тащи'
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#blackStretchyIcon',
            // Метку можно перемещать.
            draggable: true
        });

    myMap.geoObjects
        .add(myGeoObject)
        .add(new ymaps.Placemark([55.684758, 37.738521], {
            balloonContent: 'цвет <strong>воды пляжа бонди</strong>'
        }, {
            preset: 'islands#icon',
            iconColor: '#0095b6'
        }))
        .add(new ymaps.Placemark([55.833436, 37.715175], {
            balloonContent: '<strong>серобуромалиновый</strong> цвет'
        }, {
            preset: 'islands#dotIcon',
            iconColor: '#735184'
        }))
        .add(new ymaps.Placemark([55.687086, 37.529789], {
            balloonContent: 'цвет <strong>влюбленной жабы</strong>'
        }, {
            preset: 'islands#circleIcon',
            iconColor: '#3caa3c'
        }))
        .add(new ymaps.Placemark([55.782392, 37.614924], {
            balloonContent: 'цвет <strong>детской неожиданности</strong>'
        }, {
            preset: 'islands#circleDotIcon',
            iconColor: 'yellow'
        }))
        .add(new ymaps.Placemark([55.642063, 37.656123], {
            balloonContent: 'цвет <strong>бисмарк-фуриозо</strong>'
        }, {
            preset: 'islands#icon',
            iconColor: '#a5260a'
        }))
        .add(new ymaps.Placemark([55.826479, 37.487208], {
            balloonContent: 'цвет <strong>фэйсбука</strong>'
        }, {
            preset: 'islands#dotIcon',
            iconColor: '#3b5998'
        }))
        .add(new ymaps.Placemark([55.694843, 37.435023], {
            balloonContent: 'цвет <strong>вконтакте</strong>'
        }, {
            preset: 'islands#circleIcon',
            iconColor: '#4d7198'
        }))
        .add(new ymaps.Placemark([55.790139, 37.814052], {
            balloonContent: 'цвет <strong>твиттера</strong>'
        }, {
            preset: 'islands#circleDotIcon',
            iconColor: '#1faee9'
        }));
}

[ZverBlin]

никто и не говорил что будет сложно...все вроде расписано от и до... )))

 

может вы сделаете?  :oops: $$