Работа с google maps 1с82

Форум Программирование Общие вопросы программирования (Dev)

Конфигурации 1cv8

1. user703966_martynyuknatalia 07.03.17 17:40 Сейчас в теме

Добрый день!
Мне нужно в обичной форме 1с вивести на форму карту с google maps и отобразить на ней Торговие точки.

Вознаграждение за ответ

Сумма: 0 $m

Добавили:
user703966_martynyuknatalia (0.12 $m)

Получили:

mart-k667 (0.12 $m)

Показать полностью

Ответы

Подписаться на ответы Инфостарт бот

Свернуть все

2. mart-k667 07.03.17 17:49 Сейчас в теме +0.04 $m

Для того чтоби отобразить на обичной форме 1с8 карту необходимо сначало всатить на форму поле HTML документа. И потом ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст("Ваш текст HTML страници");

3. mart-k667 07.03.17 18:00 Сейчас в теме

Напирмер найпростейший текс страници для карт гугл виглядит так:

<HT ML><HEAD>
<MET A http-equiv=Content-Type content="text/html; charset=utf-8"></META>
<MET A content="initial-scale=1.0, user-scalable=no" name=viewport></META>
<ST YLE type=text/css>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</STYLE>
</HEAD>
<BODY on load=initialize()>
<DIV id=map_canvas style="WIDTH: 100%; float: left; HEIGHT: 100%;overflow: auto"></DIV>

<SC RIPT src="http://maps.google.com/maps/api/js?sensor=false&" type="text/javascript" async="async" defer="defer"></SC RIPT>

<SC RIPT type="text/javascript" async="async" defer="defer">
var map;
var directionsDisplay;

function initialize() {
var myLatlng = new google.maps.LatLng(56,37);
var myOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLatlng,
disableDoubleClickZoom: true
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

}
</SC RIPT>
</BODY></HTML>

4. mart-k667 07.03.17 18:02 Сейчас в теме

Етот код будет виглядеть так

Прикрепленные файлы:

5. mart-k667 07.03.17 18:07 Сейчас в теме

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

6. mart-k667 07.03.17 18:08 Сейчас в теме

Так будет виглядить процедура если использовать макет

Процедура ОтобразитьКартуНажатие(Элемент)
	тт=ПолучитьМакет("ТекстКарты").ПолучитьТекст();
	ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст(тт);
КонецПроцедуры

7. mart-k667 07.03.17 18:15 Сейчас в теме

Есть в 1с тип макета "HTML документ" но я использовал тип макета "Текстовый документ", потому что если я использовал первий вариант то у меня обрезались скрипти которие используются в HTML странице.

8. user703966_martynyuknatalia 07.03.17 18:46 Сейчас в теме

Большое спасибо! Все работает. Ище подскажите пожалуйста как мне отобразить на карте точки?

9. mart-k667 07.03.17 19:02 Сейчас в теме

Точки будем виводить в виде обэкта карт гугл которий називается маркер. Он имеет некоторие свойства. Ми будем использовати некоторие из них. Поетому в текст макета вставлем такие строки:

...

var marker = new google.maps.Marker({
position: new google.maps.LatLng( 56,37),
map: map});

Прикрепленные файлы:

10. mart-k667 07.03.17 19:24 Сейчас в теме

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

11. mart-k667 07.03.17 19:24 Сейчас в теме

Процедура ОтобразитьКартуНажатие(Элемент)
	тз=Новый ТаблицаЗначений;
	тз.Колонки.Добавить("ТТ");
	тз.Колонки.Добавить("Широта");
	тз.Колонки.Добавить("Долгота");
	
	нс=тз.Добавить();
	нс.ТТ="тт1";
	нс.Широта=56.1;
	нс.Долгота=37.1;
	
	нс=тз.Добавить();
	нс.ТТ="тт2";
	нс.Широта=56.5;
	нс.Долгота=37.5;
	
	нс=тз.Добавить();
	нс.ТТ="тт3";
	нс.Широта=56.8;
	нс.Долгота=37.8;
	
	Строка="";
	Для каждого стр Из тз Цикл
		Строка=Строка+"var marker = new google.maps.Marker({position: new google.maps.LatLng("+Формат(стр.Широта,"ЧРД=.; ЧГ=")+","+Формат(стр.Долгота,"ЧРД=.; ЧГ=")+"),map: map});";
	КонецЦикла;
	
	тт=ПолучитьМакет("ТекстКарты").ПолучитьТекст();
	тт=СтрЗаменить(тт,"[=-парТочкы-=]",Строка);
	ЭлементыФормы.ПолеHTMLДокумента.УстановитьТекст(тт);
КонецПроцедуры

Показать

12. mart-k667 07.03.17 19:27 Сейчас в теме

function initialize() {
var myLatlng = new google.maps.LatLng(56,37);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLatlng,
disableDoubleClickZoom: true
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

[=-парТочкы-=]

}

13. mart-k667 07.03.17 19:29 Сейчас в теме

В целом ето и есть вся обработка. Скидаю пример.

Прикрепленные файлы:

Карта.epf

14. user703966_martynyuknatalia 07.03.17 19:35 Сейчас в теме

Большое Вам спасибо!

15. user703966_martynyuknatalia 07.03.17 19:44 Сейчас в теме

Подскажите пожалоса, очень нужно вивести на маркерах наименование точок. Ето возможно?

16. mart-k667 07.03.17 20:14 Сейчас в теме

Вот изменэнная обработка с виводом наименования точок.

Прикрепленные файлы:

Карта.epf

17. user703966_martynyuknatalia 08.03.17 19:44 Сейчас в теме

Скажите пожалуйста как изменить цвет маркера на карте

18. mart-k667 09.03.17 00:52 Сейчас в теме

Как изменить цвет маркера я не знаю, но можно вместо маркера подставить свою картинку. Для етого сначало нужно нарисовать картинку в Paint например, а потом написать путь к рисунку в свойствах етого маркера:

Строка=Строка+"var icon='C:/image.png';var marker = new google.maps.Marker({position: new google.maps.LatLng("+Формат(стр.Широта,"ЧРД=.; ЧГ=")+","+Формат(стр.Долгота,"ЧРД=.; ЧГ=")+"),icon: icon,label:'"+стр.ТТ+"',map: map});";

Прикрепленные файлы:

Карта.epf

19. user703966_martynyuknatalia 09.03.17 01:14 Сейчас в теме

А как сделать чтобы когда кликаеш по маркеру на еран выводилась дополнительная иформация о торговой точке?

20. user703966_martynyuknatalia 09.03.17 01:17 Сейчас в теме

И ище а можно перемещать маркер на карте? как ето делать?

22. mart-k667 09.03.17 01:38 Сейчас в теме

(20) Для того чтоби перемещать маркер по карте нужно свойство маркера "draggable" установить в true.

Прикрепленные файлы:

Карта.epf

21. mart-k667 09.03.17 01:27 Сейчас в теме

В макете нужно Добавить обработку собития "onclick", ее можно сфелать в отдельной функции, например так:
function inf(marker,tekst,map){
google.maps.event.addListener(marker, 'click', function ($event)
{
var iw = new google.maps.InfoWindow;
iw.setContent(tekst);
iw.setPosition(marker.position);
iw.open(map);
});
};

Прикрепленные файлы:

Карта.epf

23. user703966_martynyuknatalia 09.03.17 01:39 Сейчас в теме

А как при окончание перетаскивания маркера вывести на еран новые координати маркера?

24. mart-k667 09.03.17 01:44 Сейчас в теме +0.05 $m

(23) Для етого нужно добавить обработку собития "dragend" :
function inf2(marker,map){
google.maps.event.addListener(marker, 'dragend', function ($event)
{
alert(marker.getPosition());
});
};

Прикрепленные файлы:

Карта.epf

25. user703966_martynyuknatalia 09.03.17 01:45 Сейчас в теме

А как изменить цвет текста надписи?

26. mart-k667 09.03.17 02:07 Сейчас в теме +0.03 $m

(25) Для етого необходимо задать для свойства маркера "Label" соответствуищие свойства:
label:{color: '#FF0000', text:'"+стр.ТТ+"'},
Сечас цвет надписи будет красним.

Прикрепленные файлы:

Карта.epf

27. mart-k667 09.03.17 02:08 Сейчас в теме

О, вспомнил! Поздровляю с 8 марта!

28. user703966_martynyuknatalia 09.03.17 02:09 Сейчас в теме

Очень большое спасибо! Особено за поздравление!

29. user652485_daniel.905 16.03.17 23:55 Сейчас в теме

Подскажите, подобный код у меня, карта на десктопе работает, на IOS работает, а вот на Android не показывает ничего. Используется мобильная платформа 1С.
Код страницы:

<!DO CTYPE html>
<ht ml><head>
<met a name="viewport" content="initial-scale=1.0, user-scalable=no">
<met a http-equiv="X-UA-Compatible" content="IE=9">
<met a charset="utf-8">
<st yle>
HTML {
HEIGHT: 100%; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
BODY {
HEIGHT: 100%; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
#map {
HEIGHT: 100%; WIDTH: 100%; FLOAT: left
}
#directions-panel {
margin-top: 20px;
background-color: #FFEE77;
padding: 10px;
}
</style>

<met a name="GENERATOR" content="MSHTML 11.00.9600.18538"><ba se href="/redirect.php?url=djhjb25maWc6Ly8zMjU5N2UyNi02YTI4LTRkZWMtOWE3My0xNTZiN2ZkYzkyYWIvbWRvYmplY3QvaWQxM2Q0YmUxNS0zZTdkLTQ3ZjYtOTBlOS1hNGRjOGE0MjZkNDQvOGViNGZhZDEtMWZhNi00MDNlLTk3MGYtMmMxMmRiYjQzZTIz"></head>

<body on load="initMap()">
<DIV id=map></DIV><div id="directions-panel"></div>
<Sc ript type="text/javascript" async="async" defer="defer">

function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
calculateAndDisplayRoute(directionsService, directionsDisplay);
var marker1 = new google.maps.Marker({
position: {lat: 37.771, lng: -122.4471},
map: map,
zIndex: 100,
label: 'Current position'
});

}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
}

directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: false,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
else {
window.alert('Directions request failed due to ' + status);
}
});
}
</sc ript>
<sc ript src="https://maps.googleapis.com/maps/api/js?key=МойКлюч"
async defer></sc ript>
</body>
</html>

Оставьте свое сообщение

E-mail: