From 202a2ffb4707df0e6b2e451ba70e8963869706f8 Mon Sep 17 00:00:00 2001 From: Krivchikov Dmitry Date: Sat, 3 May 2014 22:44:05 +0400 Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=82=D1=84=D0=BE=D1=80=D0=BC=D0=B0?= =?UTF-8?q?=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BB=20JS=20=D1=81=20?= =?UTF-8?q?=D0=BF=D1=80=D0=BE=D0=B1=D0=B5=D0=BB=D0=BE=D0=B2=20=D0=BD=D0=B0?= =?UTF-8?q?=20=D1=82=D0=B0=D0=B1=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/main.js | 415 +++++++++++++++++++++++----------------------- 1 file changed, 207 insertions(+), 208 deletions(-) diff --git a/public/js/main.js b/public/js/main.js index d5b9d22..2275a7b 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -12,66 +12,64 @@ var route = false; // -------------------------------- Libs --------------------------------------- function getURLParameter(name) { - return decodeURI( - (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] - ); + return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]); } // ----------------------------------------------------------------------------- function init() { - myMap = new ymaps.Map("map", { - center: [ymaps.geolocation.latitude, ymaps.geolocation.longitude], - zoom: 12, - behaviors: ['default', 'scrollZoom'] - }); + myMap = new ymaps.Map("map", { + center: [ymaps.geolocation.latitude, ymaps.geolocation.longitude], + zoom: 12, + behaviors: ['default', 'scrollZoom'] + }); - myMap.controls.add('mapTools'); - myMap.controls.add('typeSelector'); - myMap.controls.add('smallZoomControl'); - myMap.controls.add('scaleLine'); + myMap.controls.add('mapTools'); + myMap.controls.add('typeSelector'); + myMap.controls.add('smallZoomControl'); + myMap.controls.add('scaleLine'); - initCategories() - getPoints(); + initCategories() + getPoints(); - myMap.events.add('click', function (e) { - if (!myMap.balloon.isOpen()) { - if ( $('#addPointButton').hasClass('btn-success') ) - { - coords = e.get('coordPosition'); - $('#addPointLat').val(coords[0].toPrecision(11)); - $('#addPointLng').val(coords[1].toPrecision(11)); - $('#addPointModal').modal('show'); - } - } - else { - myMap.balloon.close(); - } - }); - - myMap.events.add('boundschange', function(e){ + myMap.events.add('click', function(e) { if (!myMap.balloon.isOpen()) { - history.pushState({}, document.title, "/?lat="+e.get('newCenter')[0]+"&lng="+e.get('newCenter')[1]+"&zoom="+e.get('newZoom')); + if ($('#addPointButton').hasClass('btn-success')) + { + coords = e.get('coordPosition'); + $('#addPointLat').val(coords[0].toPrecision(11)); + $('#addPointLng').val(coords[1].toPrecision(11)); + $('#addPointModal').modal('show'); + } + } + else { + myMap.balloon.close(); } }); - points.im = new ymaps.Placemark( - [ymaps.geolocation.latitude, ymaps.geolocation.longitude], - { - balloonContentHeader: 'Вы здесь', + myMap.events.add('boundschange', function(e) { + if (!myMap.balloon.isOpen()) { + history.pushState({}, document.title, "/?lat=" + e.get('newCenter')[0] + "&lng=" + e.get('newCenter')[1] + "&zoom=" + e.get('newZoom')); + } + }); + + points.im = new ymaps.Placemark( + [ymaps.geolocation.latitude, ymaps.geolocation.longitude], + { + balloonContentHeader: 'Вы здесь', hintContent: 'Ваше местоположение', - balloonContent: - '' - }, - { - iconImageHref: '/ico/man.png', - iconImageSize: [32, 37], - iconImageOffset: [-16, -33], - } - ); - myMap.geoObjects.add(points.im); + balloonContent: + '' + }, + { + iconImageHref: '/ico/man.png', + iconImageSize: [32, 37], + iconImageOffset: [-16, -33], + } + ); + myMap.geoObjects.add(points.im); $("#wayPoints").sortable(); $("#wayPoints").disableSelection(); @@ -79,223 +77,224 @@ function init() { function constructPoint(data) { - id = data['id']; - points[id] = new ymaps.Placemark( - [data['lat'], data['lng']], { - hintContent: data['name'], - id: id - }, - { - iconImageHref: data['categoryIcon'], - iconImageSize: [32, 37], - iconImageOffset: [-16, -33], - openEmptyBalloon: true, - balloonCloseButton: true - }); + id = data['id']; + points[id] = new ymaps.Placemark( + [data['lat'], data['lng']], { + hintContent: data['name'], + id: id + }, + { + iconImageHref: data['categoryIcon'], + iconImageSize: [32, 37], + iconImageOffset: [-16, -33], + openEmptyBalloon: true, + balloonCloseButton: true + }); - points[id].events.add('click', function (e) { - showInfo(e.get('target').properties.get('id')); - }); + points[id].events.add('click', function(e) { + showInfo(e.get('target').properties.get('id')); + }); - return points[id]; + return points[id]; } function getPoints() { - $.ajax({ - url: "/json/points/", - success: function(data){ - for(var k in data) { - myMap.geoObjects.add(constructPoint(data[k])); - } + $.ajax({ + url: "/json/points/", + success: function(data) { + for (var k in data) { + myMap.geoObjects.add(constructPoint(data[k])); + } - if (getURLParameter('point') != 'null') - { - showInfo(getURLParameter('point')); - } else if ( (getURLParameter('lat') != 'null')&&(getURLParameter('lng') != 'null')&&(getURLParameter('zoom') != 'null') ) + if (getURLParameter('point') != 'null') + { + showInfo(getURLParameter('point')); + } else if ((getURLParameter('lat') != 'null') && (getURLParameter('lng') != 'null') && (getURLParameter('zoom') != 'null')) { myMap.setCenter([getURLParameter('lat'), getURLParameter('lng')], getURLParameter('zoom')); } - } - }); + } + }); - return true; + return true; } function showInfo(id) { - if (!(id in points) || points[id].properties.get('balloonContent') == undefined) - { - points[id].properties.set('balloonContent', 'Загрузка...'); - $.ajax({ - url: "/json/point/id/" + id, - success: function(data) { - description = '
' + - '' + - '

' + data.name + '

' + - '' + - '' + - '
' + - data.description + - ' Подробнее...
' - points[id].properties.set('balloonContent', description); + if (!(id in points) || points[id].properties.get('balloonContent') == undefined) + { + points[id].properties.set('balloonContent', 'Загрузка...'); + $.ajax({ + url: "/json/point/id/" + id, + success: function(data) { + description = '
' + + '' + + '

' + data.name + '

' + + '' + + '' + + '
' + + data.description + + ' Подробнее...
' + points[id].properties.set('balloonContent', description); - point = getURLParameter('point'); - if (point != null && id == point) - { - points[point].balloon.open(); - } - } - }); - } + point = getURLParameter('point'); + if (point != null && id == point) + { + points[point].balloon.open(); + } + } + }); + } - history.pushState({}, document.title, "/?point="+id); - return true; + history.pushState({}, document.title, "/?point=" + id); + return true; } function initCategories() { - $.ajax({ - url: "/json/categories/", - success: function(data){ - categories = data; - } - }); + $.ajax({ + url: "/json/categories/", + success: function(data) { + categories = data; + } + }); - return true; + return true; } function searchAdderess() { - var myGeocoder = ymaps.geocode($('#addressField').val()); - myGeocoder.then( - function (res) { - search = new ymaps.Placemark(res.geoObjects.get(0).geometry.getCoordinates()); - myMap.geoObjects.add(search); - myMap.setCenter(res.geoObjects.get(0).geometry.getCoordinates(), 10); - }, - function (err) {} - ); + var myGeocoder = ymaps.geocode($('#addressField').val()); + myGeocoder.then( + function(res) { + search = new ymaps.Placemark(res.geoObjects.get(0).geometry.getCoordinates()); + myMap.geoObjects.add(search); + myMap.setCenter(res.geoObjects.get(0).geometry.getCoordinates(), 10); + }, + function(err) { + } + ); } function showMeOnTheMap() { - navigator.geolocation.getCurrentPosition(function(pos) { - points.im.geometry.setCoordinates([pos.coords.latitude, pos.coords.longitude]); - myMap.setCenter(points.im.geometry.getCoordinates()); - }); + navigator.geolocation.getCurrentPosition(function(pos) { + points.im.geometry.setCoordinates([pos.coords.latitude, pos.coords.longitude]); + myMap.setCenter(points.im.geometry.getCoordinates()); + }); - myMap.setCenter(points.im.geometry.getCoordinates()); + myMap.setCenter(points.im.geometry.getCoordinates()); } function activateAddPoint() { - $('#addPointButton').toggleClass('btn-success').toggleClass('btn-default'); - if ( $('#addPointButton').hasClass('btn-success') ) - myMap.cursors.push('crosshair'); - else - myMap.cursors.push('arrow'); + $('#addPointButton').toggleClass('btn-success').toggleClass('btn-default'); + if ($('#addPointButton').hasClass('btn-success')) + myMap.cursors.push('crosshair'); + else + myMap.cursors.push('arrow'); } function addPoint() { - $('.form-group').removeClass('has-error'); - $.ajax({ - type: "POST", - url: "/json/addpoint/", - data: { - name: $('#addPointName').val(), - img: $('#addPointImg').val(), - description: $('#addPointDescription').val(), - categoryId: $('#addPointCategoryId').val(), - source: $('#addPointSource').val(), - lat: $('#addPointLat').val(), - lng: $('#addPointLng').val() - }, - success: function(data) { - balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false}); - setTimeout(function() { - balloon.close(); - }, 3000); + $('.form-group').removeClass('has-error'); + $.ajax({ + type: "POST", + url: "/json/addpoint/", + data: { + name: $('#addPointName').val(), + img: $('#addPointImg').val(), + description: $('#addPointDescription').val(), + categoryId: $('#addPointCategoryId').val(), + source: $('#addPointSource').val(), + lat: $('#addPointLat').val(), + lng: $('#addPointLng').val() + }, + success: function(data) { + balloon = myMap.balloon.open([$('#addPointLat').val(), $('#addPointLng').val()], {content: 'Точка успешно добавлена!'}, {closeButton: false}); + setTimeout(function() { + balloon.close(); + }, 3000); - obj = {}; - obj.id = data; - obj.name = $('#addPointName').val(); - obj.lat = $('#addPointLat').val(); - obj.lng = $('#addPointLng').val(); - obj.categoryIcon = categories[$('#addPointCategoryId').val()].icon; + obj = {}; + obj.id = data; + obj.name = $('#addPointName').val(); + obj.lat = $('#addPointLat').val(); + obj.lng = $('#addPointLng').val(); + obj.categoryIcon = categories[$('#addPointCategoryId').val()].icon; - setTimeout(function(){ - myMap.geoObjects.add(constructPoint(obj)); - }, 3000); + setTimeout(function() { + myMap.geoObjects.add(constructPoint(obj)); + }, 3000); - $('#addPointModal').modal('hide'); + $('#addPointModal').modal('hide'); - // Clear form - $('#addPointForm input').val(''); - $('#addPointForm textarea').val(''); - $('.form-group').removeClass('has-error'); - $('#addPointButton').removeClass('btn-success').addClass('btn-default'); - myMap.cursors.push('arrow'); - }, - error: function(data) { - response = data.responseJSON; - message = ''; - for (var k in response) { - if (typeof response[k] !== 'function') { - if (k == 1) - $('#addPointName').parent().addClass('has-error'); - else - if (k == 2) - $('#addPointImg').parent().addClass('has-error'); - else - if (k == 3) - $('#addPointDescription').parent().addClass('has-error'); - else - message += response[k] + '; '; - } - } + // Clear form + $('#addPointForm input').val(''); + $('#addPointForm textarea').val(''); + $('.form-group').removeClass('has-error'); + $('#addPointButton').removeClass('btn-success').addClass('btn-default'); + myMap.cursors.push('arrow'); + }, + error: function(data) { + response = data.responseJSON; + message = ''; + for (var k in response) { + if (typeof response[k] !== 'function') { + if (k == 1) + $('#addPointName').parent().addClass('has-error'); + else + if (k == 2) + $('#addPointImg').parent().addClass('has-error'); + else + if (k == 3) + $('#addPointDescription').parent().addClass('has-error'); + else + message += response[k] + '; '; + } + } - if (message != '') - alert(message); - } - }); + if (message != '') + alert(message); + } + }); } function buildRoute() { - wayPoints = Array(); + wayPoints = Array(); if (route) myMap.geoObjects.remove(route); - $('#wayPoints div').each(function(i, el) - { - wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates()); - }); + $('#wayPoints div').each(function(i, el) + { + wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates()); + }); - ymaps.route(wayPoints, { - mapStateAutoApply: true - }).then(function(newRoute) { + ymaps.route(wayPoints, { + mapStateAutoApply: true + }).then(function(newRoute) { route = newRoute; - route.options.set({ - // в балуне выводим только информацию о времени движения с учетом пробок - balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'), - strokeColor: '9000ffff', - opacity: 0.9 - }); + route.options.set({ + // в балуне выводим только информацию о времени движения с учетом пробок + balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'), + strokeColor: '9000ffff', + opacity: 0.9 + }); - myMap.geoObjects.add(route); - distance = Math.round(route.getLength() / 1000); - $('#routeDistance').text(distance + ' км.') - }); + myMap.geoObjects.add(route); + distance = Math.round(route.getLength() / 1000); + $('#routeDistance').text(distance + ' км.') + }); } function addToRoute(id) { - $('#wayPoints').append('
× ' + points[id].properties.get('hintContent') + '
'); - myMap.balloon.close(); - $('#routeWindow').show(200); - return true; + $('#wayPoints').append('
× ' + points[id].properties.get('hintContent') + '
'); + myMap.balloon.close(); + $('#routeWindow').show(200); + return true; }