Question

在我的网页上，我已经有一个带有搜索栏的Google Maps API（请参阅下面的代码），首先用户会确定一个地址。然后，用户可以使用搜索栏搜索此点周围的商家。在搜索完成之前，我想在这个地址周围绘制一个圆圈，例如距离为15公里。搜索应仅显示此圈内的结果。如果你也可以移动圆圈那将是很好的... 如何使用Google地图执行此操作？

<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）来执行此操作，其中步数定义了圆的“smothness”。绘制折线的圆点将是（RADIUS sin（loop_counter），RADIUS cos（loop_counter））。

你可以通过计算距起点的距离来搜索范围，距离= sqrt（（x1-x2）^ 2 +（y1-y2）^ 2）其中x1，y1是你的位置，x2，y2是位置您检查的对象是否在范围内。如果此表达式的值小于X，则表示该对象位于您要查找的范围（x）中。但是这个范围的单位就像是地球上的程度。要将此值重新计算为公里，您需要将其乘以约67（例如，在Google地球上查看您所在地区的度数大约等于一公里或英里）

当然，地球不是精确的球体，但精确的功能非常复杂，以上解决方案应该有效。

编辑：要进行搜索，您必须要搜索一些数据。假设它是数据库，其中保存的对象具有经度和海拔高度值。现在，要查找起点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;

必须记住，这些值取决于你的位置，并且地球不是完美的球体，因此，这种表达方式不会特别地在地球的顶部或底部。这种搜索方式就像在地图上寻找完美圆圈中的物体（但不应该），你可以在这里看到完美圆形的干扰：

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

如何在Google Maps API上绘制圆圈并在圈内搜索？

2 个答案: