Google maps : вывод точек на карту и режим панорамы

В отличие от яндекс карт в GMaps можно использовать панорамы - за что им большой плюс! Надеюсь в яндексе прочитают этот пост и тоже когда-нибудь это сделают!

Для клиента нужно было сделать вывод объектов на карту

С возможностью просмотра панорамы:

Основной HTML код карты хранится в макете:

Код VBS

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.sitedev.by/lab/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript">
	var latlng;
	var markers = [];
	var myMap;
	var index = 1;
	var directionsDisplay;
	var directionsService = new google.maps.DirectionsService();
	var infoWindow = new google.maps.InfoWindow;
	var clusterer, mcOptions;
	var trafficLayer = new google.maps.TrafficLayer();
	var trafficOn = false;
	var noclick = false;
	var PointArray = [];
	var polygons = [];


  	function initialize() {
  		directionsDisplay = new google.maps.DirectionsRenderer();
		latlng = new google.maps.LatLng(55.75, 37.62);
	  	var myOptions = {
		  zoom: 12,
		  center: latlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  disableDoubleClickZoom: true,
		  panControl: true,
		  zoomControl: true,
		  mapTypeControl: true,
		  scaleControl: true,
		  streetViewControl: true,
		  overviewMapControl: true
		};
		myMap = new google.maps.Map(document.getElementById("map"),
	       myOptions);
	       
	    google.maps.event.addListener(myMap, 'dragend', function() {
        	noclick = true;			
			document.getElementById('CoordX').value = "0";
			document.getElementById('CoordY').value = "0";  
        });
        
        google.maps.event.addListener(myMap, 'click', function(event) {
	    	infoWindow.close();
	    	if (!noclick) {
				addMarker(event.latLng);
	      	}else{
	      		noclick = false;
	      	}
	    });          
	    
	    mcOptions = {gridSize: 3, maxZoom: 15};
	    clusterer = new MarkerClusterer(myMap, markers, mcOptions);
	    
	    //отображение кнопки управления трафиком - все спер с примера, только подцепил свою функцию
	    var trafficControlDiv = document.createElement('div');
        
        trafficControlDiv.style.padding = '5px';


        // Set CSS for the control border
        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = 'white';
        controlUI.style.borderStyle = 'solid';
        controlUI.style.borderWidth = '2px';
        controlUI.style.cursor = 'pointer';
        controlUI.style.textAlign = 'center';
        controlUI.title = 'нажмите для вкл/выкл трафика';
        trafficControlDiv.appendChild(controlUI);


        // Set CSS for the control interior
        var controlText = document.createElement('div');
        controlText.style.fontFamily = 'Arial,sans-serif';
        controlText.style.fontSize = '12px';
        controlText.style.paddingLeft = '4px';
        controlText.style.paddingRight = '4px';
        controlText.innerHTML = '<b>Трафик</b>';
        controlUI.appendChild(controlText);


        google.maps.event.addDomListener(controlUI, 'click', function (){
			if (!trafficOn){
				trafficOn = true;
				trafficLayer.setMap(myMap);
			}else{
				trafficOn = false;
				trafficLayer.setMap(null);
			}
			});


        trafficControlDiv.index = 1;
        myMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(trafficControlDiv);
	};
  
	//добавляем маркер и отправляем в массив
	function addMarker(location) {
		marker = new google.maps.Marker({
			position: location,
			map: myMap,
			title: 'Точка'+index
		});
		infoWindow.setContent(marker.title);
        infoWindow.open(myMap, marker);
		
		google.maps.event.addListener(marker, 'click', function(){
			 var mark = this;
		     var latLng = mark.getPosition();
		     infoWindow.setContent(mark.title);
             infoWindow.open(myMap, mark);});
		
		markers.push(marker);
		index++;
		
		document.getElementById('CoordX').value = location.lat();
		document.getElementById('CoordY').value = location.lng();
	}
	
	function calcRoute(options) {
	  //вытягиваем из массива переданных параметров значения
	  //и преобразуем их в формат LatLng
	  var option1 = options[0];//начальная точка 
	  var option2 = options[1];//промежуточные точки
	  var option3 = options[2];//конечная точка
	  var start = new google.maps.LatLng(option1[0], option1[1]);  //первый
	  var end = new google.maps.LatLng(option3[0], option3[1]); //последний
	  //получаем транзитные точки
	  var waypts = [];
	  if(option2.length > 0) {
	  	for(var i = 0, l = option2.length; i < l; i++) {
	  		temp = option2[i]; 
			Qcoord = new google.maps.LatLng(temp[0], temp[1])
			waypts.push({
	          location:Qcoord,
	          stopover:true
	      });
		} 
	  }	 
	  //return;
	  var request = {
	      origin: start,
	      destination: end,
	      waypoints: waypts,
	      optimizeWaypoints: true,
	      travelMode: google.maps.TravelMode.DRIVING
	  };
	  directionsService.route(request, function(response, status) {
	    if (status == google.maps.DirectionsStatus.OK) {
	    	directionsDisplay.setMap(myMap);
	    	directionsDisplay.setDirections(response);
	      
	    	var total = 0; 
		    var myroute = response.routes[0];
		 
		    for (i = 0; i < myroute.legs.length; i++) {		 
		      total += myroute.legs[i].distance.value;		 
		    }
		  	total = total / 1000;
		  	document.getElementById('RouteInfo').value = "Длина маршрута - " + total + "км.";
	        
	        //генерация события для перехвата в 1С
	        var evt = document.createEventObject();
	  		document.body.fireEvent('ondatasetcomplete', evt);
	    }else{
	    	alert(status);
	    }
	  });
	}
	
	function Reset(){
		directionsDisplay.setMap(null);
		for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(null);
        }
		markers = [];
		index = 1;
		
		//обнуляем кластер маркеров
		clusterer.clearMarkers();
		
		for (var i = 0; i < polygons.length; i++) {
          polygons[i].setMap(null);
        }
		polygons = [];
		PointArray = [];
	}
	
	function FindAdres(Adres){
		Reset();
		var geocoder = new google.maps.Geocoder();
	    geocoder.geocode( { 'address': Adres}, function(results, status) {
	      if (status == google.maps.GeocoderStatus.OK) {
	        latlng = results[0].geometry.location;
			myMap.panTo(latlng);
			
			 marker = new google.maps.Marker({
	            map: myMap,
	            position: latlng,
	            animation: google.maps.Animation.BOUNCE,
	            title:Adres
	        });
	        
	        markers.push(marker);
	        
	        infoWindow.setContent(marker.title);
        	infoWindow.open(myMap, marker);
	      } else {
	        alert("Ничего не найдено: " + status);
	      }
	    });
	}
	
	function ReverseSearchAdres(CoordX, CoordY, Adres){
		Reset();
		latlng = new google.maps.LatLng(CoordX, CoordY);
		myMap.panTo(latlng);
		
		var marker = new google.maps.Marker({
	        map: myMap,
            position: latlng,
            animation: google.maps.Animation.BOUNCE,
            title:Adres
        });
        
        markers.push(marker);
        
        infoWindow.setContent(marker.title);
        infoWindow.open(myMap, marker);
	}
	
	function addToPointArray(CoordX, CoordY, ID, IconT, Text){
		var latLng = new google.maps.LatLng(CoordX, CoordY);
	  	var point = new google.maps.Marker({'position': latLng, title: Text,  icon: IconT});
	  	PointArray.push(point);
	}
	
	function drawCluster(){
		clusterer.addMarkers(PointArray);
		//myMap.geoObjects.add(clusterer);
	}	
	
	function createPolygon(ArrayPoint, Name, color) {
		//создаем массив координат вершин многоугольника
		var paths = [];
		for(var i = 0, l = ArrayPoint.length; i < l; i++) {
	  		var temp = ArrayPoint[i]; 
			Qcoord = new google.maps.LatLng(temp[0], temp[1])
			paths.push(Qcoord);
		};
	
		// Создаем многоугольник
		myPolygon = new google.maps.Polygon({
		    paths: paths,
		    strokeColor: color,
		    strokeOpacity: 0.6,
		    strokeWeight: 5,
		    fillColor: "#0000FF"
		  });
                    
        myPolygon.setMap(myMap);
        polygons.push(myPolygon);
    }
    
    function WebClientClick() {
    	//очистка перед кликом координат, иначе после клика в упр. формах идет считывание координат
    	document.getElementById('CoordX').value = "0";
		document.getElementById('CoordY').value = "0";
    	
    	var WebClientOperation = document.getElementById("WebClientOperation").value;
		//alert(WebClientOperation);
		switch (WebClientOperation) {
        	case "0":   // ничего не делаем
        	   var a = 1; 
        	default:   // запускаем функцию
        	    eval(WebClientOperation);
        }
        document.getElementById('WebClientOperation').value = "0";
	}
</script>
</head>


<body onload="initialize()">
    <div id="map" style="width:100%; height:100%"></div>
    <input type="hidden" id="CoordX" name="CoordX" value="0"></input>
    <input type="hidden" id="CoordY" name="CoordY" value="0"></input>
    <input type="hidden" id="RouteInfo" name="RouteInfo" value=""></input>
    <input type="hidden" id="WebClientOperation" name="WebClientOperation" value="0"></input>
    <input type="hidden" id="WebClient" name="WebClient" onclick="WebClientClick();"></input>
</body>
</html>

Код вывода карты:

Код 1C v 8.х

 Процедура ИнициализироватьКарту()
	
	ПутьКФайлу = КаталогВременныхФайлов()+"Карта.html";
	Ф = новый Файл(ПутьКФайлу);
	Если Ф.Существует() Тогда
		УдалитьФайлы(ПутьКФайлу);
	КонецЕсли; 
	
	Т = новый ТекстовыйДокумент;
	ТД = ЭтотОбъект.ПолучитьМакет("МакетГугл");
	Т.УстановитьТекст(ТД.ПолучитьТекст());
	Т.Записать(ПутьКФайлу);
	
	ЭлементыФормы.Эксплорер.Перейти(ПутьКФайлу);
КонецПроцедуры


Процедура ОчиститьКарту()
	ЭлементыФормы.Эксплорер.Документ.parentWindow.eval("Reset()");
КонецПроцедуры

//к сожалению, другого спососба получить "внутрь 1С" информацию о действии пользователя на карте я не сумел
//действие пользователя на карте изменяет поле HTML-документа, но не вызывает никакого события в 1с-ке  
// поэтому через обработчикОжидания делаю непрерывный  опрос карты
Процедура ПриОткрытии()	
ИнициализироватьКарту();  	
КонецПроцедуры

// вывод точек на карту
Процедура ОсновныеДействияФормыОсновныеДействияФормыВыполнить(Кнопка)
	
	ОчиститьКарту();
	СписокВидов = Новый СписокЗначений;
	Для Каждого стр из ВыборВывода Цикл
		   если стр.пометка тогда СписокВидов.Добавить(стр.наименование); КонецЕсли;
	   КонецЦикла;
	табАдресов.Очистить();
	
	табАдресов = получитьтабАдресов(СписокВидов);
	табУникальныхАдресов = табАдресов.скопировать();
	табУникальныхАдресов.свернуть("Уник");
	тзДанных = табАдресов.скопировать();
	табАдресов.очистить();
	Для Каждого стр из табУникальныхАдресов Цикл 
		Отбор = Новый Структура();
		Отбор.Вставить("Уник",стр.Уник);
		Строки = тзДанных.НайтиСтроки(Отбор); 		
		НовСтр = табАдресов.добавить();
		НовСтр.уник = стр.уник;
		Если Строки.Количество() > 0 Тогда
			для Каждого тздстр из Строки Цикл 
				  НовСтр.Адрес = тздстр.Адрес;
				  НовСтр.КД = тздстр.КД;
				  НовСтр.КШ = тздстр.КШ;
                  НовСтр.ВидОбъекта = тздстр.ВидОбъекта;
				  НовСтр.Наименование=Строка(НовСтр.Наименование)+Строка(тздстр.Наименование)+"; ";
			КонецЦикла;	
			КонецЕсли;
	КонецЦикла;	
	ЭлементыФормы.табАдресов.СоздатьКолонки();


	ВыборМасштаба = "50%";
	ВыборРегиона = "Москва";
	ЭлементыФормы.Надпись24.Заголовок = "Точек: "+Строка(табАдресов.количество());


	
	Кол = табАдресов.Количество();
	Индекс = 0;
	Для Каждого ТекСтрока Из табАдресов Цикл Индекс = Индекс + 1;  Если НЕ ЗначениеЗаполнено(ТекСтрока.КД) тогда Продолжить; КонецЕсли;
		Широта = формат(ТекСтрока.КШ, "ЧРД=.");
		Долгота = формат(ТекСтрока.КД, "ЧРД=.");
		СодержимоеТочки = СокрЛП(ТекСтрока.ВидОбъекта)+": "+ СокрЛП(ТекСтрока.адрес);  //опять же можно вставить свое название
		Попытка
		ЭлементыФормы.Эксплорер.Документ.parentWindow.eval("addToPointArray(" + Широта + "," + Долгота + ", '" + Строка(Индекс) + "', '" + СокрЛП(ТекСтрока.ВидОбъекта.ПутьКИконке)+ "', """ + СодержимоеТочки + """);");
	Исключение
		Сообщить("addToPointArray(" + Широта + "," + Долгота + ", '" + Строка(Индекс) + "', '" + СокрЛП(ТекСтрока.ВидОбъекта.ПутьКИконке)+ "', """ + СодержимоеТочки + """);",СтатусСообщения.Внимание);
		КонецПопытки;
		Состояние("Вывожу на карту " + Индекс + " из " + кол); 		
	КонецЦикла;
	
	ЭлементыФормы.Эксплорер.Документ.parentWindow.eval("drawCluster();");

КонецПроцедуры

Вырванная из конфигурации обработка GMaps.rar

Можно ее использовать как макет для создания обработки под свои требования.

Пример автоматизации в котором это использовалось.

Google maps : вывод точек на карту и режим панорамы

Похожие FAQ

Еще в этой же категории

Ключевые слова и Изображения

Слова упорядочены по частоте использования в тексте

Изображения