如何在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>
绘制圆。您可以通过从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
的GoogleMaps的V3有一个圆圈重叠选项，只是给它一个半径，一些样式并将其绑定到一个标记。如果标记是可拖动的，那么圆圈将跟随它。看看这里的演示： http://gmaps-samples-v3.googlecode.com/svn/trunk/circle-overlay/circle-overlay.html
我有它挂接到一个jQueryUI的滑块与onChange事件，以圆和边界半径设置为一个移动的标示物设置的位置。
好的，通过循环绘制从0到PI的圆圈工作正常，但我不完全理解您的解决方案与搜索范围内... 也许你可以举个例子吗？ – Laurenz 2010-07-30 07:44:10