Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Аналог кнопки "Информация" с YA Maps на GMaps
Форумы портала PHP.SU » » Хранилище функций на JavaScript » Аналог кнопки "Информация" с YA Maps на GMaps

Страниц (1): [1]
 

1. Viper - 16 Февраля, 2011 - 08:25:44 - перейти к сообщению
Собстно столкнулся с такой необходимостью реализовать аналог, которого нет в API GMaps.
Про YA Maps можно глянуть тут http://api[dot]yandex[dot]ru/maps/jsapi/[dot][dot][dot]information[dot]html

Теперь перейду к коду.
CODE (html):
скопировать код в буфер обмена
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.                 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.                 <script src="http://maps.google.com/maps/api/js?sensor=false&language=ru" type="text/javascript"></script>
  7.                 <script type="text/javascript">
  8.                 //<![CDATA[
  9.                         /* Функция принимает строку с координатами и возвращает массив
  10.                         *  string(coords) = (30.0, 50.0)
  11.                         *  return array
  12.                         */
  13.                         function selectPoint(coords) {
  14.                                 var d = parent.document;
  15.                                 var coords_clean = coords.replace(/(\(|\)|\s)/g, '');
  16.                                 var coords_arr = coords_clean.split(',');
  17.                                 return coords_arr;
  18.                         }
  19.  
  20.                         // Объявляем переменные
  21.                         var geocoder, map, infowindow, marker;
  22.  
  23.                         // Выполняется при onload документа
  24.                         function init() {
  25.                                 // Объявляем геокодер
  26.                                 geocoder = new google.maps.Geocoder();
  27.                                 // Передаем ему параметры (адрес может быть полным либо частичным)
  28.                                 geocoder.geocode({'address': "Ukraine"}, function(results, status){
  29.                                         if (results && results.length > 0) {
  30.                                                 // Задаем параметры карты
  31.                                                 var opts = {
  32.                                                         zoom: 6, // Увеличение
  33.                                                         mapTypeId: google.maps.MapTypeId.ROADMAP, // Тип карты
  34.                                                         mapTypeControl: true, // Элементы управления
  35.                                                         mapTypeControlOptions: { // Тип элементов управления
  36.                                                                 style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  37.                                                         },
  38.                                                         scaleControl: true, // Шкала масштабирования
  39.                                                         streetViewControl: false // Эдакий пыцык Вправо/влево и т.д.
  40.                                                 }
  41.                                                 // Объявляем саму карту
  42.                                                 map = new google.maps.Map(document.getElementById("map"), opts);
  43.                                                 // Ставим центр на точку (попадает всегда на строку с названием объекта)
  44.                                                 map.setCenter(results[0].geometry.location);
  45.                                                 // Вешаем обработчик на клик по карте
  46.                                                 google.maps.event.addListener(map, 'click', function(point){
  47.                                                         // Передаем координаты в функцию
  48.                                                         addMarker(point.latLng);
  49.                                                 });
  50.                                         } else {
  51.                                                 alert("Ошибка геокодирования: "+status);
  52.                                         }
  53.                                 });
  54.                         }
  55.  
  56.                         // Ставит маркер в указанном месте
  57.                         function addMarker(loc) {
  58.                                 // Проверяем активна ли "кнопка" "Информация"
  59.                                 if (document.getElementById("chk_info").checked) {
  60.                                         // Если маркеров на карте нет то,
  61.                                         if (marker == null) {
  62.                                                 // Создаем новый маркер по указанным координатам на объекте map и делаем таскабельным :)
  63.                                                 marker = new google.maps.Marker({
  64.                                                         position: loc, map: map, draggable: true
  65.                                                 });
  66.                                                 // Передаем координаты в функцию для показа балуна
  67.                                                 geocodePosition(marker.getPosition());
  68.                                                 // Удаляем обработчик клика по карте (можно не удалять если нужно ставить несколько маркеров)
  69.                                                 google.maps.event.clearInstanceListeners(map);
  70.                                                 // Вешаем обработчик клика по маркеру для показа балуна
  71.                                                 google.maps.event.addListener(marker, 'click', function(){
  72.                                                         geocodePosition(marker.getPosition());
  73.                                                 });
  74.                                                 // Вешаем обработчик события когда мы перетянули маркер и отпустили кнопку мыши. Также показывает балун
  75.                                                 google.maps.event.addListener(marker, 'dragend', function(){
  76.                                                         geocodePosition(marker.getPosition());
  77.                                                 });
  78.                                         }
  79.                                 }
  80.                         }
  81.  
  82.                         // Функция показывает балун в указанной позиции
  83.                         function geocodePosition(pos) {
  84.                                 // Тут все точно также только вместо адреса передаем координаты
  85.                                 geocoder.geocode({'latLng': pos}, function(responses){
  86.                                         if (responses && responses.length > 0) {
  87.                                                 var html = '<span class="geoInfo">'+responses[0].formatted_address+'<br />Координаты'+pos+'<br /><a href="javascript:void(0);" onclick="selectPoint(\''+pos+'\');">Выбрать точку</a></span>';
  88.                                                 infowindow = new google.maps.InfoWindow({content: html});
  89.                                                 infowindow.open(map, marker);
  90.                                         } else {
  91.                                                 infowindow = new google.maps.InfoWindow({content: "Ошибка геокодирования"});
  92.                                                 infowindow.open(map, marker);
  93.                                         }
  94.                                 });
  95.                         }
  96.  
  97.                         // Функция получает координаты объекта по адресу и перемещает центр карты к этим координатам
  98.                         function codeAddress() {
  99.                                 var address = document.getElementById("address").value;
  100.  
  101.                                 geocoder.geocode({'address': address}, function(results, status){
  102.                                         if (status == google.maps.GeocoderStatus.OK) {
  103.                                                 map.setCenter(results[0].geometry.location);
  104.                                                 var marker = new google.maps.Marker({
  105.                                                         map: map, position: results[0].geometry.location
  106.                                                 });
  107.                                         } else {
  108.                                                 alert("Ошибка геокодирования: "+status);
  109.                                         }
  110.                                 });
  111.                         }
  112.  
  113.                         // Тупейший обработчик события чтобы было видно что чекбокс активен
  114.                         // Использовал JQ, но что мешает заменить чистым JS
  115.                         function switchState(obj) {
  116.                                 var $ = parent.jQuery;
  117.                                 if (!$("#chk_info").attr("checked")) {
  118.                                         $(obj).css("font-weight", "bold");
  119.                                 } else {
  120.                                         $(obj).css("font-weight", "normal");
  121.                                 }
  122.                         }
  123.  
  124.                         // Собстно вешаем обработчик на DOM
  125.                         google.maps.event.addDomListener(window, 'load', init);
  126.                 //]]>
  127.                 </script>
  128.                 <style type="text/css">
  129.                         html, #map {
  130.                                 width: 100%;
  131.                                 height: 100%;
  132.                         }
  133.                         body {
  134.                                 width: 100%;
  135.                                 height: 100%;
  136.                                 margin: 0;
  137.                                 padding: 0;
  138.                         }
  139.                         .toolbar {
  140.                                 margin: 5px 5px 5px 29%;
  141.                                 position: absolute;
  142.                                 right: 100px;
  143.                                 top: 0;
  144.                                 z-index: 10001;
  145.                         }
  146.                         #geosearch {
  147.                                 float: right;
  148.                         }
  149.                         #geosearch #button {
  150.                                 border: 1px solid rgb(169, 187, 223);
  151.                                 color: black;
  152.                                 font-family: Arial,sans-serif;
  153.                                 font-size: 12px;
  154.                                 min-width: 50px;
  155.                                 -moz-user-select: none;
  156.                                 background: -moz-linear-gradient(center top , rgb(254, 254, 254), rgb(243, 243, 243)) repeat scroll 0% 0% transparent;
  157.                                 -moz-border-radius: 0pt 2px 2px 0pt;
  158.                                 -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
  159.                                 padding: 2px 6px 1px 6px;
  160.                                 text-align: center;
  161.                                 line-height: 160%;
  162.                                 font-weight: normal;
  163.                         }
  164.                         #geosearch #button:hover {
  165.                                 border: 1px solid #678AC7;
  166.                                 cursor: pointer;
  167.                         }
  168.                         #address {
  169.                                 border: 1px solid rgb(169, 187, 223);
  170.                                 color: black;
  171.                                 font-family: Arial,sans-serif;
  172.                                 font-size: 12px;
  173.                                 height: 18px;
  174.                                 min-width: 150px;
  175.                         }
  176.                         .geoInfo {
  177.                                 font-family: Arial,sans-serif;
  178.                                 font-size: 11px;
  179.                         }
  180.                 </style>
  181.         </head>
  182.         <body>
  183.                 <div class="toolbar">
  184.                         <div id="geosearch">
  185.                                 <input type="checkbox" id="chk_info" autocomplete="off" style="display:none;" /><label for="chk_info" id="button" onclick="switchState(this);">Информация</label>
  186.                                 <input type="text" name="address" size="50" id="address" value="" />
  187.                                 <input type="button" id="button" value="Поиск" onclick="codeAddress()" />
  188.                         </div>
  189.                 </div>
  190.                 <div id="map"></div>
  191.         </body>
  192. </html>

 

Powered by ExBB FM 1.0 RC1