Перейти к содержимому


Расчет расстояний в представлении

Автор Dinak, 22 июля 2014 06:47

Сообщений в теме: 15

#1 Dinak

    Активный участник

  • Пользователи
  • PipPipPip
  • 207 сообщений
  • Пол:Мужчина
  • Город:Новосибирск

Отправлено 22 Июль 2014 - 06:47

Привет, такой вопрос, на родных сайтах Google Map и Yandex Map можно найти код HTML + JS на расчет расстояний, простой вопрос

Как вставить JS и HTML в представление, ну с HTML вроде все понятно, а куда JS вставить и как оформить ? :o :blink:

#2 maksn

    Активный участник

  • Пользователи
  • PipPipPip
  • 314 сообщений
  • Пол:Мужчина

Отправлено 22 Июль 2014 - 08:37

Просмотр сообщенияDinak (22 Июль 2014 - 06:47) писал:

Привет, такой вопрос, на родных сайтах Google Map и Yandex Map можно найти код HTML + JS на расчет расстояний, простой вопрос

Как вставить JS и HTML в представление, ну с HTML вроде все понятно, а куда JS вставить и как оформить ? :o :blink:

Дмитрий,
В "подготовке данных" передаете в Smarty адреса точек маршрута.
В "отображение" вставляете HTML и JS. JS обрамляете {literal}Ваш JS{/literal}
"...Сижу, паяю. CRM починяю..."
Мои разработки

#3 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 762 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 22 Июль 2014 - 09:46

Цитата

JS обрамляете {literal}Ваш JS{/literal}

В текущей версии Smarty это не обязательно, достаточно чтобы после фигурных скобок в JS был пробел или перевод строки (чтобы не путались со smarty-конструкциями).

#4 Dinak

    Активный участник

  • Пользователи
  • PipPipPip
  • 207 сообщений
  • Пол:Мужчина
  • Город:Новосибирск

Отправлено 22 Июль 2014 - 10:16

В "подготовке данных" передаете в Smarty адреса точек маршрута.


Was id das?

#5 maksn

    Активный участник

  • Пользователи
  • PipPipPip
  • 314 сообщений
  • Пол:Мужчина

Отправлено 22 Июль 2014 - 10:25

Просмотр сообщенияDinak (22 Июль 2014 - 10:16) писал:

В "подготовке данных" передаете в Smarty адреса точек маршрута.


Was id das?

А как, собственно, будет работать Ваш (Google/Yandex) код, если ему не передать исходные и конечные точки?
Посмотрите в найденные примеры. Там наверняка где то они указываются. Вот туда и передавайте свои через переменные Smarty
  $address1='Село Гадюкино':
  $address2='New Vasyuki';
  $smarty->assign("address1", $address1);
   $smarty->assign("address2", $address2);
Если нужны координаты, не прямые адреса, то сначала получите их запросом к Google/Yandex (API в помощь)

Сообщение отредактировал maksn: 22 Июль 2014 - 10:40

"...Сижу, паяю. CRM починяю..."
Мои разработки

#6 Dinak

    Активный участник

  • Пользователи
  • PipPipPip
  • 207 сообщений
  • Пол:Мужчина
  • Город:Новосибирск

Отправлено 22 Июль 2014 - 10:43

Цитата

А как, собственно, будет работать Ваш (Google/Yandex) код, если ему не передать исходные и конечные точки?
Посмотрите в найденные примеры. Там наверняка где то они указываются. Вот туда и передавайте свои через переменные Smarty

Разрешите для примера выложить код, покажите как передать исходные данные пож-ста, и как сделать чтобы отображались два поля для ввода данные, нужно задействовать КБ или просто как HTML


<!DOCTYPE html>
<html>
  <head>
	<title>Distance Matrix service</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
	{literal}  <style>
	  html, body {
		height: 100%;
		margin: 0;
		padding: 0;
	  }
	  #map-canvas {
		height: 100%;
		width: 50%;
	  }
	  #content-pane {
		float:right;
		width:48%;
		padding-left: 2%;
	  }
	  #outputDiv {
		font-size: 11px;
	  }
	</style>
{/literal}
{literal}
	<script>
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var origin1 = new google.maps.LatLng(55.930, -3.118);
var origin2 = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var destinationB = new google.maps.LatLng(50.087, 14.421);
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
function initialize() {
  var opts = {
	center: new google.maps.LatLng(55.53, 9.4),
	zoom: 10
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
  geocoder = new google.maps.Geocoder();
}
function calculateDistances() {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
	{
	  origins: [origin1, origin2],
	  destinations: [destinationA, destinationB],
	  travelMode: google.maps.TravelMode.DRIVING,
	  unitSystem: google.maps.UnitSystem.METRIC,
	  avoidHighways: false,
	  avoidTolls: false
	}, callback);
}
function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
	alert('Error was: ' + status);
  } else {
	var origins = response.originAddresses;
	var destinations = response.destinationAddresses;
	var outputDiv = document.getElementById('outputDiv');
	outputDiv.innerHTML = '';
	deleteOverlays();
	for (var i = 0; i < origins.length; i++) {
	  var results = response.rows[i].elements;
	  addMarker(origins[i], false);
	  for (var j = 0; j < results.length; j++) {
		addMarker(destinations[j], true);
		outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
			+ ': ' + results[j].distance.text + ' in '
			+ results[j].duration.text + '<br>';
	  }
	}
  }
}
function addMarker(location, isDestination) {
  var icon;
  if (isDestination) {
	icon = destinationIcon;
  } else {
	icon = originIcon;
  }
  geocoder.geocode({'address': location}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	  bounds.extend(results[0].geometry.location);
	  map.fitBounds(bounds);
	  var marker = new google.maps.Marker({
		map: map,
		position: results[0].geometry.location,
		icon: icon
	  });
	  markersArray.push(marker);
	} else {
	  alert('Geocode was not successful for the following reason: '
		+ status);
	}
  });
}
function deleteOverlays() {
  for (var i = 0; i < markersArray.length; i++) {
	markersArray[i].setMap(null);
  }
  markersArray = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
	</script>
{/literal}
  </head>
  <body>
	<div id="content-pane">
	  <div id="inputs">
		<pre>
var origin1 = new google.maps.LatLng(55.930, -3.118);
var origin2 = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var destinationB = new google.maps.LatLng(50.087, 14.421);
		</pre>
		<p><button type="button" onclick="calculateDistances();">Calculate
		  distances</button></p>
	  </div>
	  <div id="outputDiv"></div>
	</div>
	<div id="map-canvas"></div>
  </body>
</html>

Сообщение отредактировал Dinak: 22 Июль 2014 - 10:44

#7 maksn

    Активный участник

  • Пользователи
  • PipPipPip
  • 314 сообщений
  • Пол:Мужчина

Отправлено 22 Июль 2014 - 10:56

Просмотр сообщенияDinak (22 Июль 2014 - 10:43) писал:

Разрешите для примера выложить код, покажите как передать исходные данные пож-ста, и как сделать чтобы отображались два поля для ввода данные, нужно задействовать КБ или просто как HTML



var origin1 = new google.maps.LatLng(55.930, -3.118); - Первая исходная точка. Задана в координатах
var origin2 = 'Greenwich, England'; - Вторая исходная точка. Задана прямым указанием адреса

var destinationA = 'Stockholm, Sweden'; - Первая конечная точка. Задана прямым указанием адреса
var destinationB = new google.maps.LatLng(50.087, 14.421); - Вторая конечная точка. Задана в координатах

Как я понимаю, не видя описания примера, есть два маршрута
1. Из точки origin1 в точку destinationA
2. Из точки origin2 в точку destinationB

В своем представлении делаете 2 поля ввода
<input type=text name=origin> --Пункт отправления
<input type=text name=destination> - Пункт назначения

и кнопку Submit
В "подготовке данных" обрабатываете значения из формы
$origin = $_REQUEST['origin'];
$destination = $_REQUEST['destination'];

Дальше передаете полученные переменные в Smarty.
В "Отображении" в нужное место подставляете соответствующую переменную Smarty

var origin1 =Ваша переменная начальной точки;
var destinationA =Ваша переменная конечной;


Если нужно, как в примере, 2 маршрута - делаете 4 поля ввода

Все

Сообщение отредактировал maksn: 22 Июль 2014 - 11:34

"...Сижу, паяю. CRM починяю..."
Мои разработки

#8 Dinak

    Активный участник

  • Пользователи
  • PipPipPip
  • 207 сообщений
  • Пол:Мужчина
  • Город:Новосибирск

Отправлено 22 Июль 2014 - 11:26

Вопрос простой, как мне из этого кода сделать "представление" в КБ следующего вида:

2 поля:
1) Загрузка
2) Выгрузка

Кнопка "Рассчитать" после чего подгружается карта с маршрутом, и расстоянием между точками!

#9 maksn

    Активный участник

  • Пользователи
  • PipPipPip
  • 314 сообщений
  • Пол:Мужчина

Отправлено 22 Июль 2014 - 12:03

Просмотр сообщенияDinak (22 Июль 2014 - 11:26) писал:

Вопрос простой, как мне из этого кода сделать "представление" в КБ следующего вида:

2 поля:
1) Загрузка
2) Выгрузка

Кнопка "Рассчитать" после чего подгружается карта с маршрутом, и расстоянием между точками!
Ровно, как я описал выше
Как я помню, Вы уже делали подобное. Только не в отчетах, а в доп действиях.

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

Сообщение отредактировал maksn: 22 Июль 2014 - 12:15

"...Сижу, паяю. CRM починяю..."
Мои разработки

#10 Dinak

    Активный участник

  • Пользователи
  • PipPipPip
  • 207 сообщений
  • Пол:Мужчина
  • Город:Новосибирск

Отправлено 22 Июль 2014 - 12:19

Вроде все сделал
Подготовка данных:

$origin = $_REQUEST['origin'];
$destination = $_REQUEST['destination'];


Отображение 

<!DOCTYPE html>
<html>
  <head>
    <title>Distance Matrix service</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    {literal} 
<style>
	  html, body {
	    height: 100%;
	    margin: 0;
	    padding: 0;
	  }
	  #map-canvas {
	    height: 100%;
	    width: 50%;
	  }
	  #content-pane {
	    float:right;
	    width:48%;
	    padding-left: 2%;
	  }
	  #outputDiv {
	    font-size: 11px;
	  }
    </style>
{/literal} 
<script>
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];

var origin = $origin;
var destination = $destination;

var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
function initialize() {
  var opts = {
    center: new google.maps.LatLng(55.53, 9.4),
    zoom: 10
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
  geocoder = new google.maps.Geocoder();
}
function calculateDistances() {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
	  origins: [origin],
	  destinations: [destination],
	  travelMode: google.maps.TravelMode.DRIVING,
	  unitSystem: google.maps.UnitSystem.METRIC,
	  avoidHighways: false,
	  avoidTolls: false
    }, callback);
}
function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var outputDiv = document.getElementById('outputDiv');
    outputDiv.innerHTML = '';
    deleteOverlays();
    for (var i = 0; i < origins.length; i++) {
	  var results = response.rows[i].elements;
	  addMarker(origins[i], false);
	  for (var j = 0; j < results.length; j++) {
	    addMarker(destinations[j], true);
	    outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
		    + ': ' + results[j].distance.text + ' in '
		    + results[j].duration.text + '<br>';
	  }
    }
  }
}
function addMarker(location, isDestination) {
  var icon;
  if (isDestination) {
    icon = destinationIcon;
  } else {
    icon = originIcon;
  }
  geocoder.geocode({$origin: location}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
	  bounds.extend(results[0].geometry.location);
	  map.fitBounds(bounds);
	  var marker = new google.maps.Marker({
	    map: map,
	    position: results[0].geometry.location,
	    icon: icon
	  });
	  markersArray.push(marker);
    } else {
	  alert('Geocode was not successful for the following reason: '
	    + status);
    }
  });
}
function deleteOverlays() {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="content-pane">
	  <div id="inputs">
	    <pre>
<form><input type="text"  name="origin"  placeholder="Загрузка"/></input></form>
<form><input type="text"  name="destination"  placeholder="Выгрузка"/></form>
	    </pre>
	    <p><button type="button" onclick="calculateDistances();">Calculate
		  distances</button></p>
	  </div>
	  <div id="outputDiv"></div>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>


Но в итоге НЕ выдаёт ничего, пустая страница.

#11 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 762 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 22 Июль 2014 - 13:24 

<!DOCTYPE html>
<html>
  <head>
	<title>Distance Matrix service</title>

Это всё лишнее в отчетах, т.к. все заголовки уже есть на странице. Также лишние <body> и <form>. Естественно, закрывающие тэги тоже не нужны. По сути "отображение" вставляет код в уже готовую форму на странице.

#12 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 762 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 22 Июль 2014 - 13:28

Вот что у меня получилось после чистки:

<style>
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
#map-canvas {
	height: 100%;
	width: 50%;
}
#content-pane {
	float:right;
	width:48%;
	padding-left: 2%;
}
#outputDiv {
	font-size: 11px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var origin = $origin;
var destination = $destination;
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
function initialize() {
  var opts = {
	center: new google.maps.LatLng(55.53, 9.4),
	zoom: 10
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
  geocoder = new google.maps.Geocoder();
}
function calculateDistances() {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
	{
		  origins: [origin],
		  destinations: [destination],
		  travelMode: google.maps.TravelMode.DRIVING,
		  unitSystem: google.maps.UnitSystem.METRIC,
		  avoidHighways: false,
		  avoidTolls: false
	}, callback);
}
function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
	alert('Error was: ' + status);
  } else {
	var origins = response.originAddresses;
	var destinations = response.destinationAddresses;
	var outputDiv = document.getElementById('outputDiv');
	outputDiv.innerHTML = '';
	deleteOverlays();
	for (var i = 0; i < origins.length; i++) {
		  var results = response.rows[i].elements;
		  addMarker(origins[i], false);
		  for (var j = 0; j < results.length; j++) {
			addMarker(destinations[j], true);
			outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
					+ ': ' + results[j].distance.text + ' in '
					+ results[j].duration.text + '<br>';
		  }
	}
  }
}
function addMarker(location, isDestination) {
  var icon;
  if (isDestination) {
	icon = destinationIcon;
  } else {
	icon = originIcon;
  }
  geocoder.geocode({$origin: location}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
		  bounds.extend(results[0].geometry.location);
		  map.fitBounds(bounds);
		  var marker = new google.maps.Marker({
			map: map,
			position: results[0].geometry.location,
			icon: icon
		  });
		  markersArray.push(marker);
	} else {
		  alert('Geocode was not successful for the following reason: '
			+ status);
	}
  });
}
function deleteOverlays() {
  for (var i = 0; i < markersArray.length; i++) {
	markersArray[i].setMap(null);
  }
  markersArray = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="content-pane">
	<div id="inputs">
		<pre>
			<input type="text"  name="origin"  placeholder="Загрузка" />
			<input type="text"  name="destination"  placeholder="Выгрузка" />
		</pre>
		<p>
			<button type="button" onclick="calculateDistances();">Calculate distances</button>
		</p>
	</div>
	<div id="outputDiv"></div>
</div>
<div id="map-canvas"></div>

#13 Dinak

    Активный участник

  • Пользователи
  • PipPipPip
  • 207 сообщений
  • Пол:Мужчина
  • Город:Новосибирск

Отправлено 23 Июль 2014 - 07:04

Как то странно получается! Код выше и код например с сайта Яндекса (готовый) не выдают никакого результата, т.е. script вообще не грузиться и страница пустая.

Вот пример кода Яндекса:

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript">
</script>
	<style>
		html, body, #map {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}
	</style>
<script type="text/javascript">
function init() {
	var myMap = new ymaps.Map('map', {
			center: [60.906882, 30.067233],
			zoom: 9,
			type: 'yandex#map',
			behaviors: ['scrollZoom', 'drag'],
			controls: []
		}),
		searchStartPoint = new ymaps.control.SearchControl({
			options: {
				useMapBounds: true,
				noPlacemark: true,
				noPopup: true,
				placeholderContent: 'Адрес начальной точки',
				size: 'large'
			}
		}),
		searchFinishPoint = new ymaps.control.SearchControl({
			options: {
				useMapBounds: true,
				noCentering: true,
				noPopup: true,
				noPlacemark: true,
				placeholderContent: 'Адрес конечной точки',
				size: 'large',
				float: 'none',
				position: { left: 10, top: 44 }
			}
		}),
		calculator = new DeliveryCalculator(myMap, myMap.getCenter());
	myMap.controls.add(searchStartPoint);
	myMap.controls.add(searchFinishPoint);
	searchStartPoint.events.add('resultselect', function (e) {
		var results = searchStartPoint.getResultsArray(),
			selected = e.get('index'),
			point = results[selected].geometry.getCoordinates();
		calculator.setStartPoint(point);
	})
		.add('load', function (event) {
			// По полю skip определяем, что это не дозагрузка данных.
			// По getRusultsCount определяем, что есть хотя бы 1 результат.
			if (!event.get('skip') && searchStartPoint.getResultsCount()) {
				searchStartPoint.showResult(0);
			}
		});
	searchFinishPoint.events.add('resultselect', function (e) {
		var results = searchFinishPoint.getResultsArray(),
			selected = e.get('index'),
			point = results[selected].geometry.getCoordinates();
		calculator.setFinishPoint(point);
	})
		.add('load', function (event) {
			// По полю skip определяем, что это не дозагрузка данных.
			// По getRusultsCount определяем, что есть хотя бы 1 результат.
			if (!event.get('skip') && searchFinishPoint.getResultsCount()) {
				searchFinishPoint.showResult(0);
			}
		});
}
function DeliveryCalculator(map, finish) {
	this._map = map;
	this._start = null;
	this._route = null;
	map.events.add('click', this._onClick, this);
}
var ptp = DeliveryCalculator.prototype;
ptp._onClick= function (e) {
	if (this._start) {
		this.setFinishPoint(e.get('coords'));
	} else {
		this.setStartPoint(e.get('coords'));
	}
};
ptp._onDragEnd = function (e) {
	this.getDirection();
}
ptp.getDirection = function () {
	if(this._route) {
		this._map.geoObjects.remove(this._route);
	}
	if (this._start && this._finish) {
		var self = this,
			start = this._start.geometry.getCoordinates(),
			finish = this._finish.geometry.getCoordinates();
		ymaps.geocode(start, { results: 1 })
			.then(function (geocode) {
				var address = geocode.geoObjects.get(0) &&
					geocode.geoObjects.get(0).properties.get('balloonContentBody') || '';
				ymaps.route([start, finish])
					.then(function (router) {
						var distance = Math.round(router.getLength() / 1000),
							message = '<span>Расстояние: ' + distance + 'км.</span><br/>' +
								'<span style="font-weight: bold; font-style: italic">Стоимость доставки: %sр.</span>';
						self._route = router.getPaths();
						self._route.options.set({ strokeWidth: 5, strokeColor: '0000ffff', opacity: 0.5 });
						self._map.geoObjects.add(self._route);
						self._start.properties.set('balloonContentBody', address + message.replace('%s', self.calculate(distance)));
					});
			});
		self._map.setBounds(self._map.geoObjects.getBounds())
	}
};
ptp.setStartPoint = function (position) {
	if(this._start) {
		this._start.geometry.setCoordinates(position);
	}
	else {
		this._start = new ymaps.Placemark(position, { iconContent: 'А' }, { draggable: true });
		this._start.events.add('dragend', this._onDragEnd, this);
		this._map.geoObjects.add(this._start);
	}
	if (this._finish) {
		this.getDirection();
	}
};
ptp.setFinishPoint = function (position) {
	if(this._finish) {
		this._finish.geometry.setCoordinates(position);
	}
	else {
		this._finish = new ymaps.Placemark(position, { iconContent: 'Б' }, { draggable: true });
		this._finish.events.add('dragend', this._onDragEnd, this);
		this._map.geoObjects.add(this._finish);
	}
	if (this._start) {
		this.getDirection();
	}
};
ptp.calculate = function (len) {
	// Константы.
	var DELIVERY_TARIF = 20,
		MINIMUM_COST = 500;
	return Math.max(len * DELIVERY_TARIF, MINIMUM_COST);
};
ymaps.ready(init);
</script>
<div id="map"></div>


Этот код как и предыдущий указываю в поле "Отображение"
в поле "Подготовка данных" стоит следующее:
$origin = $_REQUEST['origin'];
$destination = $_REQUEST['destination'];
$smarty->assign("origin", $origin);
$smarty->assign("destination", $destination);


Кажется проблема в оформлении....

Сообщение отредактировал Dinak: 23 Июль 2014 - 07:06

#14 maksn

    Активный участник

  • Пользователи
  • PipPipPip
  • 314 сообщений
  • Пол:Мужчина

Отправлено 23 Июль 2014 - 08:00

Просмотр сообщенияDinak (23 Июль 2014 - 07:04) писал:


Кажется проблема в оформлении....
1. А, собственно, куда в отображение передаются переменные? В этом коде я не вижу
2. В коде отображения я не вижу чем могут быть сформированы $_REQUEST. Где поля ввода? Чем и как значения этих полей передаются на обработку?
"...Сижу, паяю. CRM починяю..."
Мои разработки

#15 maksn

    Активный участник

  • Пользователи
  • PipPipPip
  • 314 сообщений
  • Пол:Мужчина

Отправлено 23 Июль 2014 - 09:55

Yandex API v.2.1
Отображение

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
function init() {
	var myMap = new ymaps.Map('map', {
			center: [60.906882, 30.067233],
			zoom: 9,
			type: 'yandex#map',
			behaviors: ['scrollZoom', 'drag'],
			controls: []
		}),
		searchStartPoint = new ymaps.control.SearchControl({
			options: {
				useMapBounds: true,
				noPlacemark: true,
				noPopup: true,
				placeholderContent: 'Адрес начальной точки',
				size: 'large'
			}
		}),
		searchFinishPoint = new ymaps.control.SearchControl({
			options: {
				useMapBounds: true,
				noCentering: true,
				noPopup: true,
				noPlacemark: true,
				placeholderContent: 'Адрес конечной точки',
				size: 'large',
				float: 'none',
				position: { left: 10, top: 44 }
			}
		}),
		calculator = new DeliveryCalculator(myMap, myMap.getCenter());

	myMap.controls.add(searchStartPoint);
	myMap.controls.add(searchFinishPoint);

	searchStartPoint.events.add('resultselect', function (e) {
		var results = searchStartPoint.getResultsArray(),
			selected = e.get('index'),
			point = results[selected].geometry.getCoordinates();

		calculator.setStartPoint(point);
	})
		.add('load', function (event) {
			// По полю skip определяем, что это не дозагрузка данных.
			// По getRusultsCount определяем, что есть хотя бы 1 результат.
			if (!event.get('skip') && searchStartPoint.getResultsCount()) {
				searchStartPoint.showResult(0);
			}
		});

	searchFinishPoint.events.add('resultselect', function (e) {
		var results = searchFinishPoint.getResultsArray(),
			selected = e.get('index'),
			point = results[selected].geometry.getCoordinates();

		calculator.setFinishPoint(point);
	})
		.add('load', function (event) {
			// По полю skip определяем, что это не дозагрузка данных.
			// По getRusultsCount определяем, что есть хотя бы 1 результат.
			if (!event.get('skip') && searchFinishPoint.getResultsCount()) {
				searchFinishPoint.showResult(0);
			}
		});
}

function DeliveryCalculator(map, finish) {
	this._map = map;
	this._start = null;
	this._route = null;

	map.events.add('click', this._onClick, this);
}

var ptp = DeliveryCalculator.prototype;

ptp._onClick= function (e) {
	if (this._start) {
		this.setFinishPoint(e.get('coords'));
	} else {
		this.setStartPoint(e.get('coords'));
	}
};

ptp._onDragEnd = function (e) {
	this.getDirection();
}

ptp.getDirection = function () {
	if(this._route) {
		this._map.geoObjects.remove(this._route);
	}

	if (this._start && this._finish) {
		var self = this,
			start = this._start.geometry.getCoordinates(),
			finish = this._finish.geometry.getCoordinates();

		ymaps.geocode(start, { results: 1 })
			.then(function (geocode) {
				var address = geocode.geoObjects.get(0) &&
					geocode.geoObjects.get(0).properties.get('balloonContentBody') || '';

				ymaps.route([start, finish])
					.then(function (router) {
						var distance = Math.round(router.getLength() / 1000),
							message = '<span>Расстояние: ' + distance + 'км.</span><br/>' +
								'<span style="font-weight: bold; font-style: italic">Стоимость доставки: %sр.</span>';

						self._route = router.getPaths();

						self._route.options.set({ strokeWidth: 5, strokeColor: '0000ffff', opacity: 0.5 });
						self._map.geoObjects.add(self._route);
						self._start.properties.set('balloonContentBody', address + message.replace('%s', self.calculate(distance)));

					});
			});
		self._map.setBounds(self._map.geoObjects.getBounds())
	}
};

ptp.setStartPoint = function (position) {
	if(this._start) {
		this._start.geometry.setCoordinates(position);
	}
	else {
		this._start = new ymaps.Placemark(position, { iconContent: 'А' }, { draggable: true });
		this._start.events.add('dragend', this._onDragEnd, this);
		this._map.geoObjects.add(this._start);
	}
	if (this._finish) {
		this.getDirection();
	}
};

ptp.setFinishPoint = function (position) {
	if(this._finish) {
		this._finish.geometry.setCoordinates(position);
	}
	else {
		this._finish = new ymaps.Placemark(position, { iconContent: 'Б' }, { draggable: true });
		this._finish.events.add('dragend', this._onDragEnd, this);
		this._map.geoObjects.add(this._finish);
	}
	if (this._start) {
		this.getDirection();
	}
};

ptp.calculate = function (len) {
	// Константы.
	var DELIVERY_TARIF = 20,
		MINIMUM_COST = 500;

	return Math.max(len * DELIVERY_TARIF, MINIMUM_COST);
};

ymaps.ready(init);


</script>

<div id="map"  style="width:1000px; height:800px; min-height:800px;"></div>

В подготовке, собственно, ничего не нужно. Но поскольку КБ "ругается" если не заполнить это поле, то ставим, например $i=1; или $I_LOVE_CB=true; :)

Все. Сохраняем и можно пользоваться. Расчет длины маршрута и стоимость - по клику на исходной точке

Сообщение отредактировал maksn: 23 Июль 2014 - 10:40

"...Сижу, паяю. CRM починяю..."
Мои разработки

#16 Dinak

    Активный участник

  • Пользователи
  • PipPipPip
  • 207 сообщений
  • Пол:Мужчина
  • Город:Новосибирск

Отправлено 23 Июль 2014 - 11:49

Спасибо большое :))))
Обратно в Как это сделать · Следующая непрочитанная тема →


Количество пользователей, читающих эту тему: 2

0 пользователей, 2 гостей, 0 анонимных

  1. Форум CRM программы Клиентская база
  2. → Форум программы Клиентская база
  3. → Как это сделать