如何在Google Maps API上的圓圈內繪製圓圈並進行搜索？

在我的網頁上，我已經有一個帶有搜索欄的Google Maps API（請參閱下面的代碼），並且首先用戶指出一個地址。然後，用戶可以使用搜索欄搜索圍繞此點的商家。在搜索完成之前，我想圍繞此地址繪製一個圓圈，例如距離15公里。搜索應該只顯示該圈子內的結果。如果您還可以移動該圓圈，那將會很不錯... 如何使用Google地圖做到這一點？如何在Google Maps API上的圓圈內繪製圓圈並進行搜索？

<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>

來源

2010-07-28 Laurenz

繪製圓。您可以通過從0到2 * PI（0..6.28）循環來實現，其中步數定義了圓的「疏」。要繪製一個圓的點將是（RADIUS sin（loop_counter），RADIUS cos（loop_counter））。

您可以通過計算距離起點的距離來搜索distance = sqrt（（x1-x2）^ 2 +（y1-y2）^ 2）其中x1，y1是您的possision，x2，y2是您檢查的對象的位置是否在範圍內。如果此表達式的值小於X，則表示該對象處於您要查找的範圍（x）中。但是這個範圍的單位就像是地球一樣。要重新計算這個公里，你需要乘以67左右（例如在谷歌地球上檢查你的地區有多少度，大約等於一公里或英里）

當然，地球並不完全是球體，但精確的功能是非常複雜，以上解決方案應該可以工作。

編輯：要進行搜索，您必須有一些數據可供搜索。假設它是數據庫，其中保存的對象具有經度和高度值。現在，要查找範圍在起點X，Y範圍內的對象，必須通過計算與您的點的距離並檢查距離小於或等於尋找對象內的範圍來比較每個對象位置與X和Y.例如查詢看起來像：

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

其中$ lat和$ LNG是你的起始點和數據庫對象的緯度和經度值googlex和Google風格的列。

$ realthemax是您的範圍。我這樣稱呼它，因爲我們計算的是學位單位，所以你必須將你的範圍（例如以公里爲單位）轉換爲「地球上的度數」。我這樣做了這樣：

我的表情和華沙和Moscov回報的地理位置爲約16.97
我在Google地球檢查此範圍在現實世界中，並在直線是1149公里
所以1「度，地球上」是67.67公里

所以，如果你想在等於$ themax公里搜索範圍，我得到範圍值的數據庫是這樣的：

$realthemax = $themax/67.67;

必須記住，這些值取決於你的位置，並且地球不是完美的球體，所以這個表達式不會特別特別地在地球的頂部或底部。這種搜索方式會像尋找完美的圓地圖上的對象（但不應該），你可以看到從正圓這裏drfference：

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

來源

2010-07-28 08:26:00

好的，通過循環繪製從0到PI的圓圈工作正常，但我不完全理解您的解決方案與搜索範圍內... 也許你可以舉個例子嗎？ – Laurenz 2010-07-30 07:44:10

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

我有它掛接到一個jQueryUI的滑塊與onChange事件，以圓和邊界半徑設置爲一個移動的標示物設置的位置。

來源

2010-07-28 08:46:23 jkilbride

-1

在這裏看到： http://maps.forum.nu/gm_drag_polygon.html

準備即插即用到V2。 :-)

來源

2010-08-02 12:06:55 Marcelo