如何在Google Maps API上繪制圓並在圓中搜索？

Question

在我的網頁上，我已經有一個帶有搜索欄的Google Maps API（請參見下面的代碼），首先，用戶要查明一個地址。 然后，用戶可以使用搜索欄在這一點附近搜索商家。 在搜索完成之前，我想在此地址周圍繪制一個圓圈，例如，距離為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>

Answer 1

GoogleMaps V3有一個圓形疊加選項，只是給它一個半徑，一些樣式並將其綁定到標記上。 如果標記是可拖動的，圓圈將跟隨它。 在此處查看演示： http : //gmaps-samples-v3.googlecode.com/svn/trunk/circle-overlay/circle-overlay.html

我用onChange事件將其連接到jQueryUI滑塊以設置圓的半徑，並綁定到可移動的標記以設置位置。

Answer 2

使用折線繪制圓。 您可以通過從0到2 * PI（0..6.28）循環來實現，其中步數定義了圓的“平滑度”。 繪制折線的圓點將是（RADIUS sin（loop_counter），RADIUS cos（loop_counter））。

您可以通過計算距起點的距離來在范圍內搜索，距離= 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
我在Goole Earth的真實世界中檢查了這個范圍，並在1149km的直線上
所以1個“地球度”為67.67公里

因此，如果您要以公里為單位搜索的范圍等於$ themax，我將獲得數據庫的范圍值，如下所示：

$realthemax = $themax/67.67;

必須記住，這些值取決於您的位置，並且地球不是完美的球體，因此，這種表達在地球的頂部或底部不會特別具體。 這種搜索方式就像在MAP上的理想圓中查找對象（但不應該這樣），您可以在此處看到理想圓的偏差：

http://gmaps-samples-v3.googlecode.com/svn/trunk/circle-overlay/circle-overlay.html

如何在Google Maps API上繪制圓並在圓中搜索？

問題描述

2 個解決方案

解決方案1
2 2010-07-28 08:46:23

解決方案2
1 已采納 2010-07-28 08:26:00

如何在Google Maps API上繪制圓並在圓中搜索？

問題描述

2 個解決方案

解決方案1 2 2010-07-28 08:46:23

解決方案2 1 已采納 2010-07-28 08:26:00

解決方案1
2 2010-07-28 08:46:23

解決方案2
1 已采納 2010-07-28 08:26:00