Как нарисовать круг и выполнить поиск по нему в API Карт Google? - PullRequest
Новая
       4

Как нарисовать круг и выполнить поиск по нему в API Карт Google?

1 голос
/ 28 июля 2010

На моей веб-странице у меня уже есть API Карт Google с панелью поиска (см. Код ниже), и сначала пользователь точно определяет адрес.Тогда пользователь сможет искать предприятия вокруг этой точки с помощью панели поиска.Прежде чем поиск будет завершен, я хотел бы нарисовать круг вокруг этого адреса, например, на расстоянии 15 км.Поиск должен показывать только результаты в этом круге.Было бы неплохо, если бы вы также могли перемещать круг ... Как я могу сделать это с помощью Google Maps?

<script type="text/javascript">
   var map = null;
     var geocoder = null;     

    function initialize() {
          /* Initialize the Google Maps */
           if (GBrowserIsCompatible()) {

         map = new GMap2(document.getElementById("map"));
         map.setCenter(new GLatLng(50.786916, 6.101360), 16);
         var customUI = map.getDefaultUI();
     customUI.controls.scalecontrol = false;
     map.setUI(customUI);
         var options = {
          onSearchCompleteCallback:function(searcher){
           var resultcontent = '';
           if (searcher.results && searcher.results.length > 0) {
            $("#ResultGrid").clearGridData(true);
            for (var i = 0; i < searcher.results.length; i++) {
             var result = searcher.results[i];

             // Split address-lines to get Zipcode
             TempString = result.addressLines[1];
             var ZipCode = TempString.split(/\b[^0-9]/);

             // construct the data array
             var InputData = {Firma:result.titleNoFormatting, Adresse:result.addressLines[0], Postleitzahl:ZipCode[0], Ort:result.city, Telefonnummer:result.phoneNumbers[0].number}; 

             // Apply data to grid
             jQuery("#ResultGrid").addRowData(i, InputData);
             $("#Result").show("slow");
            }
           } else {
            $("#Dialog").html("<p><span class=\"ui-icon ui-icon-info\" style=\"float:left; margin:0 7px 20px 0;\"></span>Kein Suchergebnis!</p>");
        $("#Dialog").dialog("option", "title", "Hinweis:");
        $("#Dialog").dialog("open");
            $("#Dialog").html("Keine Ergebnisse gefunden!");
        $("#Dialog").dialog("option", "title", "Hinweis:");
        $("#Dialog").dialog("open");
           }
          }
         };
         localSearch = new google.maps.LocalSearch(options);
         map.addControl(localSearch);
         map.removeControl(GScaleControl);

         geocoder = new GClientGeocoder();
         $("#map").hide("fast");
         $("#Result").hide("fast");
       }
     } 
     function showAddress(address, CompleteAdd) {
       if (geocoder) {
         geocoder.getLatLng(
           address,
           function(point) {
             if (!point) {
              $("#Dialog").html("<p><span class=\"ui-icon ui-icon-info\" style=\"float:left; margin:0 7px 20px 0;\"></span>"+address+" nicht gefunden</p>");
        $("#Dialog").dialog("option", "title", "Hinweis:");
        $("#Dialog").dialog("open");
             } else {
               map.setCenter(point, 16);
               var marker = new GMarker(point);
               map.addOverlay(marker);
               marker.openInfoWindowHtml(CompleteAdd);
             }
           }
         );
       }
       $("#map").show("fast");
     }
  </script>


<body onload="initialize()" onunload="GUnload()">
  <div class="main" align="center">
   <div id="Dialog">
    <p><span class="ui-icon ui-icon-info" style="float:left; "></span>Dialog text</p>
   </div>
   <br/>
   <div id="map" style="width: 850px; height:450px; padding:10px; font-size: medium; color:#853805; background-color:#FFE8CF;"></div>
  </div>
 </body>

Ответы [ 2 ]

2 голосов
/ 28 июля 2010

V3 в GoogleMaps имеет возможность наложения круга, просто задайте ему радиус, немного стилизации и привязайте его к маркеру.Если маркер является перетаскиваемым, круг будет следовать за ним.Взгляните на демо здесь: http://gmaps -samples-v3.googlecode.com / svn / trunk / circle-overlay / circle-overlay.html

Я подключил егоползунку jQueryUI с событием onChange для установки радиуса круга и привязкой к подвижному маркеру для установки положения.

1 голос
/ 28 июля 2010

Нарисуйте круг, используя полилинии.Вы можете сделать это, выполнив цикл от 0 до 2 * PI (0..6.28), где количество шагов определяет «гладкость» вашего круга.Чтобы нарисовать круг, точки вашей полилинии будут (RADIUS sin (loop_counter), RADIUS cos (loop_counter)).

Вы можете искать в диапазоне, просто рассчитав расстояние от вашей начальной точки,distance = sqrt ((x1-x2) ^ 2 + (y1-y2) ^ 2) где x1, y1 - ваша возможность, а x2, y2 - позиция проверяемого вами объекта, находится в диапазоне или нет.Если значение этого выражения меньше X, это означает, что объект находится в диапазоне (x), который вы ищете.Но единица этого диапазона - это что-то вроде градуса на земле.Чтобы пересчитать это в километры, вам нужно умножить его примерно на 67 (посмотрите, например, на Google Earth, сколько градусов в вашем регионе примерно равно одному километру или миле)

Конечно, Земля не совсем сфера, но точнаяФункция очень сложна, и решение, приведенное выше, должно работать.

Редактировать: Для поиска необходимо иметь некоторые данные для поиска. Допустим, это база данных, в которой сохраненные объекты имеют значения долготы и высоты.Теперь, чтобы найти объекты, которые находятся в диапазоне от начальной точки X, Y, вы должны сравнить местоположение каждого объекта с вашими X и Y, вычислив расстояние до вашей точки и убедитесь, что расстояние меньше или равно диапазону, в котором вы ищете объекты.Пример запроса выглядит следующим образом: 

   SELECT * FROM objects_database WHERE SQRT((googlex-$lat)*(googlex-$lat)+(googley-$lng)*(googley-$lng)) < $realthemax

Где $ lat и $ lng - ваша начальная точка, а googlex и googley - это столбцы в базе данных со значениями объекта lat и lng.

$ realthemax это вашаспектр.Я называю это так, потому что мы вычисляем градусы, поэтому вы должны преобразовать свой диапазон (например, в километрах) в «градусы на земле».Я сделал это следующим образом:

  • мое выражение и географическое положение Варшавы и Москвы возвращают диапазон около 16,97
  • Я проверяю этот диапазон в реальном мире на Земле Гул, и по прямой линии, чторавно 1149 км
  • , поэтому 1 «градус на земле» равен 67,67 км

Так что если диапазон, который вы хотите искать в километрах, равен $ themax, я получу значение диапазона для базы данных, напримерэто: 

$realthemax = $themax/67.67;

Следует помнить, что эти значения зависят от вашего местоположения, и земля не является идеальной сферой, поэтому это выражение не будет особенно особенным на вершине или на дне Земли.Этот способ поиска будет похож на поиск объектов в идеальном круге НА КАРТЕ (но не должен), вы можете увидеть отклонение от идеального круга здесь:

http://gmaps -samples-v3.googlecode.com / SVN / багажник / круг-накладка / круг-overlay.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...