API tools faq
paste
Guest User

Untitled

a guest
Sep 1st, 2015
156
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 17.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
  3. <head>
  4. <meta name="viewport" content="IE=9, initial-scale=1.0, user-scalable=no; charset=utf-8" />
  5.  
  6. <style type="text/css">
  7.   html { height: 100% }
  8.   body { height: 100%; margin: 0px; padding: 0px }
  9.   #map { height: 100% }
  10. </style>
  11.  
  12. <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
  13. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  14. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  15. <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
  16.  
  17. <script type="text/javascript">
  18.  
  19.     var latlng;
  20.     var markers = [];
  21.     var Polylines = [];
  22.     var myMap;
  23.     var index = 1;
  24.     var directionsDisplay;
  25.     var directionsService = new google.maps.DirectionsService();
  26.     var infoWindow = new google.maps.InfoWindow;
  27.     var mc, mcOptions;
  28.     //var trafficLayer = new google.maps.TrafficLayer();
  29.     //var trafficOn = false;
  30.  
  31.     var lineSymbol = {
  32.       path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  33.     };
  34.  
  35.     var rendererOptions = {
  36.         draggable: true
  37.     };
  38.     var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
  39.     var directionsService = new google.maps.DirectionsService();
  40.  
  41.     function initialize() {
  42.         directionsDisplay = new google.maps.DirectionsRenderer();
  43. //      latlng = new google.maps.LatLng(47.49430800,34.66911600);
  44.         latlng = new google.maps.LatLng(50.5160683333,30.7816383333);
  45.  
  46.         var myOptions = {
  47.           zoom: 15,
  48.           center: latlng,
  49.           mapTypeId: google.maps.MapTypeId.ROADMAP,
  50.           disableDoubleClickZoom: true,
  51.           panControl: true,
  52.           zoomControl: true,
  53.           mapTypeControl: true,
  54.           scaleControl: true,
  55.           streetViewControl: true,
  56.           overviewMapControl: true
  57.         };
  58.         myMap = new google.maps.Map(document.getElementById("map"),
  59.            myOptions);
  60.            
  61.         google.maps.event.addListener(myMap, 'dblclick', function(event) {
  62.           addMarker(event.latLng);
  63.         });
  64.        
  65.         google.maps.event.addListener(myMap, 'click', function() {
  66.           infoWindow.close();
  67.         });
  68.        
  69.         mcOptions = {gridSize: 50, maxZoom: 15};
  70.         mc = new MarkerClusterer(myMap, markers, mcOptions);
  71.        
  72.         //отображение кнопки управления трафиком - все спер с примера, только подцепил свою функцию
  73.         var trafficControlDiv = document.createElement('div');
  74.        
  75.         trafficControlDiv.style.padding = '5px';
  76.  
  77.         // Set CSS for the control border
  78.         var controlUI = document.createElement('div');
  79.         controlUI.style.backgroundColor = 'white';
  80.         controlUI.style.borderStyle = 'solid';
  81.         controlUI.style.borderWidth = '2px';
  82.         controlUI.style.cursor = 'pointer';
  83.         controlUI.style.textAlign = 'center';
  84.         controlUI.title = 'нажмите для вкл/выкл трафика';
  85.         trafficControlDiv.appendChild(controlUI);
  86.  
  87.         // Set CSS for the control interior
  88.         var controlText = document.createElement('div');
  89.         controlText.style.fontFamily = 'Arial,sans-serif';
  90.         controlText.style.fontSize = '12px';
  91.         controlText.style.paddingLeft = '4px';
  92.         controlText.style.paddingRight = '4px';
  93.         controlText.innerHTML = '<b>Трафик</b>';
  94.         controlUI.appendChild(controlText);
  95.  
  96.         google.maps.event.addDomListener(controlUI, 'click', function (){
  97.             if (!trafficOn){
  98.                 trafficOn = true;
  99.                 trafficLayer.setMap(myMap);
  100.             }else{
  101.                 trafficOn = false;
  102.                 trafficLayer.setMap(null);
  103.             }
  104.             });
  105.  
  106.         trafficControlDiv.index = 1;
  107.         myMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(trafficControlDiv);
  108.        
  109.       directionsDisplay.setMap(myMap);
  110.       directionsDisplay.setPanel(document.getElementById('directionsPanel'));
  111.      
  112.       google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  113.         computeTotalDistance(directionsDisplay.getDirections());
  114.       });
  115.      
  116. //  poly = new google.maps.Polyline(polyOptions);
  117. //  poly.setMap(myMap);
  118.  
  119.  
  120. //NewPolyLine = new google.maps.Polyline(polyOptions);
  121. //NewPolyLine.setMap(myMap);
  122.  
  123.        
  124.     }
  125.  
  126.  
  127. //  VisiblePolyLine - Видимость Ломаной на карте из массива ломаных линий (Polyline)
  128. function VisiblePolyLine ( PolylineIndex, Visible  ) {
  129.    
  130.     if (Visible) {
  131.         Polylines [PolylineIndex].setMap(myMap);
  132.     } else {
  133.         Polylines [PolylineIndex].setMap(null);
  134.     }
  135.  
  136. }
  137.  
  138.  
  139.  
  140.  
  141.    
  142. function hexToRgb(hex) {
  143.     // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  144.     var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  145.     hex = hex.replace(shorthandRegex, function(m, r, g, b) {
  146.         return r + r + g + g + b + b;
  147.     });
  148.  
  149.     var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  150.     return result ? {
  151.         r: parseInt(result[1], 16),
  152.         g: parseInt(result[2], 16),
  153.         b: parseInt(result[3], 16)
  154.     } : null;
  155. }  
  156.    
  157.    
  158.     //добавляем маркер и отправляем в массив
  159.     function addMarker(location) {
  160.         marker = new google.maps.Marker({
  161.             position: location,
  162.             map: myMap,
  163.             title: 'Точка'+index
  164.         });
  165.        
  166.         infoWindow.setContent(marker.title);
  167.         infoWindow.open(myMap, marker);
  168.        
  169.         google.maps.event.addListener(marker, 'click', function(){
  170.              var mark = this;
  171.              var latLng = mark.getPosition();
  172.              infoWindow.setContent(mark.title);
  173.              infoWindow.open(myMap, mark);});
  174.        
  175.         markers.push(marker);
  176.         index++;
  177.        
  178.         document.getElementById('CoordX').value = location.lat();
  179.         document.getElementById('CoordY').value = location.lng();
  180.        
  181.         //обновляем кластер маркеров
  182.         mc.addMarker(marker);
  183.     }
  184.    
  185.     function getCoordX(){
  186.         return document.getElementById('CoordX').value;
  187.     }
  188.    
  189.     function getCoordY(){
  190.         return document.getElementById('CoordY').value;
  191.     }
  192.    
  193.     function My_LatLng(latitude, longitude){
  194.  
  195.         var myLatlng = new google.maps.LatLng(latitude, longitude);
  196.    
  197.         return myLatlng;
  198.     }
  199.  
  200.     function calcRoute(options) {
  201.       //вытягиваем из массива переданных параметров значения
  202.       //и преобразуем их в формат LatLng
  203.       var option1 = options[0];//начальная точка
  204.       var option2 = options[1];//промежуточные точки
  205.       var option3 = options[2];//конечная точка
  206.       var start = new google.maps.LatLng(option1[0], option1[1]);  //первый
  207.       var end = new google.maps.LatLng(option3[0], option3[1]); //последний
  208.       //получаем транзитные точки
  209.       var waypts = [];
  210.  
  211.       if(option2.length > 0) {
  212.         for(var i = 0, l = option2.length; i < l; i++) {
  213.             temp = option2[i];
  214.             Qcoord = new google.maps.LatLng(temp[0], temp[1])
  215.             waypts.push({
  216.               location:Qcoord,
  217.               stopover:true
  218.           });
  219.         }
  220.       }  
  221.       //return;
  222.       var request = {
  223.           origin: start,
  224.           destination: end,
  225.           waypoints: waypts,
  226.           optimizeWaypoints: true,
  227.           travelMode: google.maps.TravelMode.DRIVING
  228.       };
  229.       directionsService.route(request, function(response, status) {
  230.         if (status == google.maps.DirectionsStatus.OK) {
  231.           directionsDisplay.setMap(myMap);
  232.           directionsDisplay.setDirections(response);
  233.         }else{
  234.             alert(status);
  235.         }
  236.       });
  237.     }
  238.    
  239.     function Reset(){
  240.         directionsDisplay.setMap(null);
  241.         for (var i = 0; i < markers.length; i++) {
  242.           markers[i].setMap(null);
  243.         }
  244.         markers = [];
  245.         index = 1;
  246.        
  247.         //обновляем кластер маркеров
  248.         mc.clearMarkers();
  249.        
  250.         //Активных маркеров нет 
  251.         document.getElementById('AnimatedMarkerID').value = -1;
  252.     }
  253.    
  254.     function FindAdres(Adres){
  255.         Reset();
  256.         var geocoder = new google.maps.Geocoder();
  257.         geocoder.geocode( { 'address': Adres}, function(results, status) {
  258.           if (status == google.maps.GeocoderStatus.OK) {
  259.             latlng = results[0].geometry.location;
  260.             myMap.panTo(latlng);
  261.            
  262.              marker = new google.maps.Marker({
  263.                 map: myMap,
  264.                 position: latlng,
  265.                 animation: google.maps.Animation.BOUNCE,
  266.                 title:Adres
  267.             });
  268.            
  269.             markers.push(marker);
  270.            
  271.             infoWindow.setContent(marker.title);
  272.             infoWindow.open(myMap, marker);
  273.            
  274.             //обновляем кластер маркеров
  275.             mc.addMarker(marker);
  276.           } else {
  277.             alert("Ничего не найдено: " + status);
  278.           }
  279.         });
  280.     }
  281.    
  282.     function ReverseSearchAdres(CoordX, CoordY, Adres){
  283.         Reset();
  284.         latlng = new google.maps.LatLng(CoordX, CoordY);
  285.         myMap.panTo(latlng);
  286.        
  287.         var marker = new google.maps.Marker({
  288.             map: myMap,
  289.             position: latlng,
  290.             animation: google.maps.Animation.BOUNCE,
  291.             title:Adres
  292.         });
  293.        
  294.         markers.push(marker);
  295.        
  296.         infoWindow.setContent(marker.title);
  297.         infoWindow.open(myMap, marker);
  298.  
  299.         //обновляем кластер маркеров
  300.         mc.addMarker(marker);
  301.     }
  302.    
  303.     //window.onerror = null;
  304.     //function myOnError(msg, url, lno) {return true}  
  305.  
  306.  
  307. //  addShopMarker - добавляем маркер торговой точки и отправляем в массив
  308. function addShopMarker( latitude, longitude, ShopTitle, WeekDay) {
  309.    
  310.     var myLatlng = new google.maps.LatLng(latitude, longitude);
  311.    
  312.       var image_00 = {
  313.         url: 'D:/GoogleMaps/images/small_red.png',
  314.         // This marker is 20 pixels wide by 32 pixels tall.
  315.         size: new google.maps.Size(9, 9),
  316.         // The origin for this image is 0,0.
  317.         origin: new google.maps.Point(0,0),
  318.         // The anchor for this image is the base of the flagpole at 0,32.
  319.         anchor: new google.maps.Point(0, 9)
  320.       };
  321.      
  322.       var image_02 = {
  323.         //url: 'https://chart.googleapis.com/chart?chst=d_bubble_icon_texts_big&chld=home|bb|FFB573|000000|Haunted+House|Hours:+Midnight+to+3:00+AM|Ghouls,+Goblins,+and+Vampires|Bring+your+own+wooden+шашлык'
  324.         //url: 'https://chart.googleapis.com/chart?'
  325.         //+ 'chst=d_map_spin&'
  326.         //+ 'chld=3|45|FFFF42|11|_|First+line|Second+line'
  327.         url: 'https://chart.googleapis.com/chart?'
  328.         + 'chst=d_map_pin_letter_withshadow&'
  329.         + 'chld=ЯЯ|FF0000|0000FF'
  330.       };
  331.      
  332.      
  333.       var image_02222 = {
  334.         url: 'D:/GoogleMaps/images/beachflag.png',
  335.         // This marker is 20 pixels wide by 32 pixels tall.
  336.         size: new google.maps.Size(20, 32),
  337.         // The origin for this image is 0,0.
  338.         origin: new google.maps.Point(0,0),
  339.         // The anchor for this image is the base of the flagpole at 0,32.
  340.         anchor: new google.maps.Point(0, 32)
  341.       };
  342.       // Shapes define the clickable region of the icon.
  343.       // The type defines an HTML &lt;area&gt; element 'poly' which
  344.       // traces out a polygon as a series of X,Y points. The final
  345.       // coordinate closes the poly by connecting to the first
  346.       // coordinate.
  347.       var shape = {
  348.           coords: [1, 1, 1, 20, 18, 20, 18 , 1],
  349.           type: 'poly'
  350.       };
  351.    
  352.     if (WeekDay == 0) {
  353.    
  354.         marker = new google.maps.Marker({
  355.             position: myLatlng,
  356.             icon: image_00,
  357.             map: myMap,
  358.             title: ShopTitle});
  359.     }
  360.     else
  361.     if (WeekDay == 1) {
  362.         marker = new google.maps.Marker({
  363.             position: myLatlng,
  364.             map: myMap,
  365.             title: ShopTitle});
  366.         }
  367.     else
  368.     if (WeekDay == 2) {
  369.    
  370.         marker = new google.maps.Marker({
  371.             position: myLatlng,
  372.             icon: image_02,
  373.             shape: shape,
  374.             map: myMap,
  375.             title: ShopTitle});
  376.        
  377.     }
  378.    
  379.     //infoWindow.setContent(marker.title);
  380.     //infoWindow.open(myMap, marker);
  381.    
  382.     markers.push(marker);
  383.     index++;
  384.    
  385.     google.maps.event.addListener(marker, 'click', function(){
  386.          var mark = this;
  387.  
  388.         for (var i = 0; i < markers.length; i++) {
  389.          if (markers[i]==marker) { document.getElementById('ClickedMarkerID').value = i; }
  390.         }
  391.                    
  392.          var latLng = mark.getPosition();
  393.          //infoWindow.setContent(mark.title);
  394.          infoWindow.setContent(mark.title.replace('\n', '<p>'));
  395.          infoWindow.open(myMap, mark);});
  396.    
  397.     document.getElementById('CoordX').value = myLatlng.lat();
  398.     document.getElementById('CoordY').value = myLatlng.lng();
  399.    
  400.     //обновляем кластер маркеров
  401.     //mc.addMarker(marker);
  402. }
  403.  
  404.  
  405. //  toggleBounce - Анимация маркера по MarkerID
  406. function toggleBounce(MarkerID) {
  407.  
  408.     OldAnimatedMarker = document.getElementById('AnimatedMarkerID').value;
  409.  
  410.     if (OldAnimatedMarker == -1) {
  411.         // Нет анимированого маркера на карте
  412.         markers[MarkerID].setAnimation(google.maps.Animation.BOUNCE);
  413.         //markers[MarkerID].setAnimation(google.maps.Animation.DROP);
  414.         document.getElementById('AnimatedMarkerID').value = MarkerID;
  415.     } else {
  416.  
  417.          markers[OldAnimatedMarker].setAnimation(null);
  418.          //alert("Остановили Marker " + OldAnimatedMarker);
  419.  
  420.          if (OldAnimatedMarker == MarkerID) {
  421.             //  Убрать аниманицию
  422.             document.getElementById('AnimatedMarkerID').value = -1;
  423.           } else {
  424.          
  425.             //  Убрать аниманицию текущего маркера
  426.             markers[MarkerID].setAnimation(google.maps.Animation.BOUNCE);
  427.             document.getElementById('AnimatedMarkerID').value = MarkerID;
  428.         }
  429.  
  430.     }
  431. }  
  432.    
  433. //  Центрирование карты по массиву маркеров
  434. function MapCentering() {
  435.  
  436.     //  Благодарности:
  437.     //  http://xandeadx.ru/blog/javascript/641
  438.  
  439.     // Область показа маркеров
  440.     var markersBounds = new google.maps.LatLngBounds();
  441.    
  442.     for (var i = 0; i < markers.length; i++) {
  443.         // Добавляем координаты маркера в область
  444.         markersBounds.extend(markers[i].getPosition());
  445.     }
  446.      
  447.     // Центрируем и масштабируем карту
  448.     myMap.setCenter(markersBounds.getCenter(), myMap.fitBounds(markersBounds));  
  449. }  
  450.    
  451. function ShowDirection(MarkersID) {
  452.  
  453.     var points = [];
  454.    
  455.     alert("В маршруте " + MarkersID.length + " точек");
  456.  
  457.     for (var i = 0; i < MarkersID.length; i++) {
  458.  
  459.         // Добавляем координаты маркера в область
  460.         points.push({
  461.           location:markers[MarkersID[i]].getPosition(),
  462.           stopover:true});     
  463.     }
  464.  
  465.     //  Рисуем цикличный маршрут, начало и конец (origin и destination) = Офис склада - markers[0]
  466.  
  467.   var request = {
  468.     origin: markers[0].getPosition() ,
  469. //    destination: markers[0].getPosition(),
  470.     destination: markers[4].getPosition(),
  471.     waypoints:points,
  472.     travelMode: google.maps.TravelMode.DRIVING
  473.   };
  474.    
  475.     //alert("request origin " + request.origin );
  476.  
  477.     directionsService.route(request, function(response, status) {
  478.     if (status == google.maps.DirectionsStatus.OK) {
  479.       //alert("DirectionsStatus OK" );
  480.       directionsDisplay.setDirections(response);
  481.     }
  482.   });
  483. }  
  484.  
  485. function computeTotalDistance(result) {
  486.   var total = 0;
  487.   var myroute = result.routes[0];
  488.   for (var i = 0; i < myroute.legs.length; i++) {
  489.     total += myroute.legs[i].distance.value;
  490.   }
  491.   total = total / 1000.0;
  492.   document.getElementById('total').innerHTML = total + ' km';
  493. }
  494.  
  495. //google.maps.event.addDomListener(window, 'load', initialize);
  496.  
  497. //  AddPolyLine - Добавить Ломаную в масиив ломаных линий (Polyline)
  498. //  HexColor    - 16-тиричное значение цвета ломаной линии
  499. //  TrackCoordinates - длинная строка. Содержит массив пар координат точек трека
  500. //function AddPolyLine ( HexColor, TrackCoordinates) {
  501.  
  502. //  ShowPolyLine - Динамическое построение ломаной линии (Polyline)
  503. //  TrackCoordinates - длинная строка. Содержит массив пар координат точек трека
  504. function ShowPolyLine ( HexColor, TrackCoordinates) {
  505.  
  506.     var polyOptions = {
  507.         icons: [{
  508.             icon: lineSymbol,
  509.             offset: '0',
  510.             repeat: '100px'
  511.         }],
  512.     strokeColor: '#' + HexColor,
  513.     strokeOpacity: 1.0,
  514.     strokeWeight: 1
  515.     }
  516.  
  517.     //  "Чистый" массив _пар_ координат
  518.     LatLangArray = TrackCoordinates.split("}");
  519.  
  520.     Polylines [Polylines.length] = new google.maps.Polyline(polyOptions);
  521.    
  522.     NewLine = Polylines [Polylines.length-1];
  523.  
  524.     NewLine.setMap(myMap);
  525.  
  526.     path = NewLine.getPath();
  527.  
  528.     for (var i = 0; i < LatLangArray.length; i++) {
  529.         //  _Пара_ координат - массив из 2-х элементов
  530.         LatLangPair = LatLangArray[i].split(";");
  531.         path.push(new google.maps.LatLng(LatLangPair [0], LatLangPair [1]));
  532.     }
  533.  
  534.    
  535. //  alert ('__' + NewLine.strokeColor + '___');
  536.    
  537. }
  538.  
  539.  
  540.  
  541. </script>
  542. </head>
  543.  
  544. <body onload="initialize()">
  545.  
  546.     <div id="map" style="width:100%; height:100%"></div>
  547.    
  548.     <input type="hidden" id="CoordX" name="CoordX" value="0"></input>
  549.     <input type="hidden" id="CoordY" name="CoordY" value="0"></input>
  550.     <input type="hidden" id="AnimatedMarkerID" name="AnimatedMarker" value="-1"></input>
  551.     <input type="hidden" id="ClickedMarkerID" name="ClickedMarkerID" value="-1"></input>
  552.        
  553. </body>
  554.  
  555. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!