关键词：
【中文标题】谷歌地图 - 查找给定半径内的所有标记 Javascript/Php【英文标题】：Google Maps - Finding all the markers inside a given radius Javascript/Php 【发布时间】：2013-09-01 23:02:26 【问题描述】：我有这个脚本可以在谷歌地图上显示自定义标记，但我想包含一个输入文本框，并能够输入城市/州和邮政编码，看看里面是否有任何标记假设距离该城市/州或邮政编码 400 英里。如果地图可以是动态的，我会喜欢它，这样当您输入城市/州或邮政编码时，它将通过删除所有其他标记并仅留下该半径内的标记，在地图上显示结果，如果这太难了，那么一个简单的改变框说什么单位是最近的也可以 :) 我搜索并发现有人说我应该加载几何库并使用computeDistanceBetween() 来查找每个标记与您的中心的距离点，但我不知道如何做邮政编码部分或如何将所有这些放在一起工作。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script type="text/javascript">
var image = new google.maps.MarkerImage("marker-images/image.png",new google.maps.Size(40,35),new google.maps.Point(0,0),new google.maps.Point(20,35));
var shadow = new google.maps.MarkerImage(
'marker-images/shadow.png',
new google.maps.Size(62,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shape =
coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
type: 'poly'
;
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
var circle = null;
//marker clusterer
var mc;
var mcOptions = gridSize: 10, maxZoom: 8;
//global infowindow
var infowindow = new google.maps.InfoWindow();
//geocoder
var geocoder = new google.maps.Geocoder();
var address = new Array("41.8119,-87.6873",
"40.7888,-74.056",
"41.8119,-87.6873",
"48.6681,-97.3627",
"44.9793,-93.273",
"39.4857,-75.6775",
"41.8119,-87.6873",
"42.0203,-87.9059",
"32.7812,-96.7903",
"27.5159,-99.4941",
"32.7812,-96.7903",
"37.5608,-95.6684",
"41.8119,-87.6873",
"38.3763,-97.6702",
"42.2458,-83.2491",
"41.8122,-91.9139",
"41.8397,-88.0887",
"41.8397,-88.0887",
"38.5128,-122.787",
"41.8397,-88.0887",
"42.8863,-87.892",
"42.8863,-87.892",
"30.7539,-83.3321",
"39.889,-84.2422",
"34.106,-83.589");
var content = new Array("Unit No# 0206",
"Unit No# #2003",
"Unit No# 0176",
"Unit No# #2001",
"Unit No# 0124",
"Unit No# 0157",
"Unit No# #0162",
"Unit No# 0104",
"Unit No# 0118",
"Unit No# #2007",
"Unit No# 0112",
"Unit No# 0139",
"Unit No# 0205",
"Unit No# 0127",
"Unit No# 0187",
"Unit No# 0105",
"Unit No# 0214",
"Unit No# 0186",
"Unit No# 0173",
"Unit No# 0134",
"Unit No# 0128",
"Unit No# 0125",
"Unit No# 0158",
"Unit No# 0193",
"Unit No# 0201");
//min and max limits for multiplier, for random numbers
//keep the range pretty small, so markers are kept close by
var min = .999999;
var max = 1.000001;
function createMarker(latlng,text)
var marker = new google.maps.Marker(
draggable: false,
raiseOnDrag: false,
icon: image,
shadow: shadow,
shape: shape,
position: latlng,
map: map
);
///get array of markers currently in cluster
var allMarkers = mc.getMarkers();
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0)
for (i=0; i < allMarkers.length; i++)
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
if (latlng.equals(pos))
text = text + " & " + content[i];
google.maps.event.addListener(marker, 'click', function()
infowindow.close();
infowindow.setContent(text);
infowindow.open(map,marker);
);
mc.addMarker(marker);
return marker;
function initialize()
var options =
zoom: 4,
center: new google.maps.LatLng(39.8282,-98.5795),
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById('map'), options);
//marker cluster
var gmarkers = [];
mc = new MarkerClusterer(map, [], mcOptions);
for (i=0; i<address.length; i++)
var ptStr = address[i];
var coords = ptStr.split(",");
var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));
gmarkers.push(createMarker(latlng,content[i]));
function codeAddress()
var address = document.getElementById('address').value;
var radius = parseInt(document.getElementById('radius').value, 10) * 1609.34;
geocoder.geocode( 'address': address, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker(
// map: map, <-- uncomment to show red marker
position: results[0].geometry.location
);
if (circle) circle.setMap(null);
circle = new google.maps.Circle(center:marker.getPosition(),
radius: radius,
fillOpacity: 0.35,
fillColor: "#FF0000",
map: map);
var bounds = new google.maps.LatLngBounds();
var foundMarkers = 0;
for (var i=0; i<gmarkers.length;i++)
if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),marker.getPosition()) < radius)
bounds.extend(gmarkers[i].getPosition())
gmarkers[i].setMap(map);
foundMarkers++;
else
gmarkers[i].setMap(null);
if (foundMarkers > 0)
map.fitBounds(bounds);
else
map.fitBounds(circle.getBounds());
else
alert(status);
);
var infowindow = new google.maps.InfoWindow(
size: new google.maps.Size(150,50)
);
function handleKeyPress(e)
var key=e.keyCode || e.which;
if (key==13)
codeAddress();
function handleResetKeyPress(e)
if (map.getZoom() != 4) map.setZoom(4);
map.setCenter(new google.maps.LatLng(39.8282, -98.5795));
document.getElementById("address").value = 'Enter City,State or Zipcode';
document.getElementById("radius").value = '200';
</script>
<style>
html, body, #map
height: 100%;
width: 100%;
margin: 0;
padding: 0;
.auto-style1
text-align: center;
#footer
position : absolute;
bottom : 0;
height : 40px;
margin-top : 40px;
/* border: 1px solid blue; */
</style>
</head>
<body onload='initialize()'>
<div id="map"></div>
<div id="footer" class="auto-style1" style="left: 0px; bottom: 0; width: 100%">
<input type="text" id="address" value="Enter City,State or Zipcode" onclick="if(this.value=='Enter City,State or Zipcode')this.value=''" onblur="if(this.value=='')this.value='Enter City,State or Zipcode'" onkeypress="handleKeyPress(event);" style="width: 183px">
<input type="button" value="Search" onclick="codeAddress();">
<input type="button" value="Reset" onclick="handleResetKeyPress();">
<input type="text" id="radius" value="200" style="width: 42px" onclick="if(this.value=='200')this.value=''" onblur="if(this.value=='')this.value='200'" onkeypress="handleKeyPress(event);"> miles
</div>
</body>
</html>
【问题讨论】：
example radius search 我在我的一张地图上做的和你完全一样，无法找到一种明智的方式来做到这一点并返回一个文本列表（尽管我需要在某个时候重新访问它未来）现在我像@geocodezip在他的示例中所做的那样，只是在地图顶部转储一个半径为X的圆形叠加层，并允许用户点击市场以自己计算区域中的实际项目。 @compcobaltCircle 的 radius 属性实际上总是以米为单位。因此，如果您以英里为单位获取用户输入，则需要将其转换为米，然后设置radius。应该是var radius = parseInt(document.getElementById('radius').value, 10) * 1609.34;。
不用担心。 setCenter 不起作用，因为您不能将数值传递给该方法，它必须是 google.maps.LatLng 对象 - map.setCenter(new google.maps.LatLng(39.8282, -98.5795));。
但问题不在于你setCenter，而在于setZoom。当您将缩放设置为相同的缩放级别时，似乎markerclusterer 不会重绘。快速解决方法是检查您是否已经处于初始缩放级别，如果是，请不要设置它，否则将其设置回初始缩放。 if (map.getZoom() != 4) map.setZoom(4);
【参考方案1】：
这是一个工作示例。
该示例使用all_locations - 示例位置数组。
您可以将其替换为您的位置（例如，您从数据库中获取的位置）。您可以在输入栏中插入任何地址，例如'123 New Street, New York, 56789, NY' 并使用 google.maps.Geocoder 代码将该地图地理编码到 LatLng 位置，在该位置周围绘制一个半径。只有位于地址周围半径范围内的位置才会显示在地图上。要查看示例位置，请输入“纽约第二街”作为地址。
var map = null;
var radius_circle;
var markers_on_map = [];
var geocoder;
var infowindow;
//all_locations is just a sample, you will probably load those from database
var all_locations = [
type: "Restaurant", name: "Restaurant 1", lat: 40.723080, lng: -73.984340,
type: "School", name: "School 1", lat: 40.724705, lng: -73.986611,
type: "School", name: "School 2", lat: 40.724165, lng: -73.983883,
type: "Restaurant", name: "Restaurant 2", lat: 40.721819, lng: -73.991358,
type: "School", name: "School 3", lat: 40.732056, lng: -73.998683
];
//initialize map on document ready
$(document).ready(function()
var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
var myOptions =
zoom: 1,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function()
if(infowindow)
infowindow.setMap(null);
infowindow = null;
);
);
function showCloseLocations()
var i;
var radius_km = $('#radius_km').val();
var address = $('#address').val();
//remove all radii and markers from map before displaying new ones
if (radius_circle)
radius_circle.setMap(null);
radius_circle = null;
for (i = 0; i < markers_on_map.length; i++)
if (markers_on_map[i])
markers_on_map[i].setMap(null);
markers_on_map[i] = null;
if (geocoder)
geocoder.geocode('address': address, function (results, status)
if (status == google.maps.GeocoderStatus.OK)
if (status != google.maps.GeocoderStatus.ZERO_RESULTS)
var address_lat_lng = results[0].geometry.location;
radius_circle = new google.maps.Circle(
center: address_lat_lng,
radius: radius_km * 1000,
clickable: false,
map: map
);
if (radius_circle) map.fitBounds(radius_circle.getBounds());
for (var j = 0; j < all_locations.length; j++)
(function (location)
var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
if (distance_from_location <= radius_km * 1000)
var new_marker = new google.maps.Marker(
position: marker_lat_lng,
map: map,
title: location.name
); google.maps.event.addListener(new_marker, 'click', function ()
if(infowindow)
infowindow.setMap(null);
infowindow = null;
infowindow = new google.maps.InfoWindow(
content: '<div style="color:red">'+location.name +'</div>' + " is " + distance_from_location + " meters from my location",
size: new google.maps.Size(150,50),
pixelOffset: new google.maps.Size(0, -30)
, position: marker_lat_lng, map: map);
);
markers_on_map.push(new_marker);
)(all_locations[j]);
else
alert("No results found while geocoding!");
else
alert("Geocode was not successful: " + status);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",other_params:"sensor=false&libraries=geometry");
</script>
<body style="margin:0px; padding:0px;" >
<input id="address" value="Second Steet, New York" placeholder="Input Address"/>
<select id="radius_km">
<option value=1>1km</option>
<option value=2>2km</option>
<option value=5>5km</option>
<option value=30>30km</option>
</select>
<button onClick="showCloseLocations()">Show Locations In Radius</button>
<div id="map_canvas" style="width:500px; height:300px;">
</body>
</html>【讨论】：
谢谢，答案对我有用。投票。你写的代码符合我的要求。我想要建议如何更改圆形区域中的圆形边框颜色、宽度和不透明度颜色。google.maps.Circle 对象具有strokeWeight, fillColor, fillOpacity 之类的属性...您可以在创建圈子时设置它们，例如：radius_circle = new google.maps.Circle( center: address_lat_lng, radius: radius_km * 1000, clickable: false, map: map, fillOpacity: 0.5, fillColor: 'ffffff' ); 更多文档中：developers.google.com/maps/documentation/javascript/3.exp/…（查找“google .maps.Circle 类")
@MatejP.我对这张地图和 UI 完全陌生。我说过一组人的纬度和日志和一个中心点。我想在 Google MAP 上将所有人的位置显示为红色标记。请原谅幼稚的问题。【参考方案2】：
这是一个示例，说明如何使用地理编码 API 和一些简单的几何图形来解决此问题。
（请注意，为简洁起见，我已经硬编码了地址和半径。）
// we assume that you have an array of markers
var markers = [];
//In order to lookup the the position of a zip-code you can use the geocoding API:
// https://developers.google.com/maps/documentation/geocoding/
var geocode_api_base_url = "http://maps.googleapis.com/maps/api/geocode/json?";
var params =
adress : 05673,
components : "country:us",
sensor : false
// This is the result set of markers in area
var in_area = [];
// http://maps.googleapis.com/maps/api/geocode/json?address=05673&components=country:US&sensor=false
$.getJSON( geocode_api_base_url + $.param(params), function(data)
var location, search_area, in_area = [];
location = data['results'][0]['address_components']['geometry']['location'];
// We create a circle to look within:
search_area =
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
center : new google.maps.LatLng(location.lat, location.lon),
radius : 500
search_area = new google.maps.Circle(search_area);
$.each(markers, function(i,marker)
if (google.maps.geometry.poly.containsLocation(marker.getPosition(), search_area))
in_area.push(marker);
);
console.info(in_area);
);
【讨论】：
使用google maps api，如何查找半径内的所有邮政编码？
...述】：我需要找到给定半径内的所有邮政编码。我已经用谷歌搜索了一个完全可以做到这一点的页面：https://www.freemaptools.com/find-zip-codes-inside-rad 查看详情
phpsql查询以查找纬度和经度的给定半径内的所有零售商(代码片段)
谷歌地图颤振中的半径单位是啥
】谷歌地图颤振中的半径单位是啥【英文标题】：Whatistheunitofradiusingooglemapsflutter谷歌地图颤振中的半径单位是什么【发布时间】：2020-08-2312:49:37【问题描述】：我的应用中有一些标记和圆圈，但我无法配置...google_maps_flutter包内... 查看详情
谷歌地图***层
】谷歌地图***层【英文标题】：TheGoogleMapsWikipediaLayer【发布时间】：2009-01-0523:22:56【问题描述】：有没有办法以编程方式列出长/纬点半径内的所有地理标记的***条目？我认为这可以通过谷歌地图API实现，但我对任何方法都感兴... 查看详情
在Django中获取一定半径内的所有点
...ngo【发布时间】：2011-03-3115:30:37【问题描述】：对于Google地图应用程序，我需要创建一个查询，在给定每个点的纬度/经度的情况下，选择我的数据库中位于给定纬度/经度的某个半径内的所有项目。在DjangoORM中有没有一种有效的... 查看详情
找到给定半径内的附近位置(代码片段)
...面都会显示该位置的详细信息，以及带有指向它的标记的谷歌地图。现在我一直在尝试实现“显示附近地点”的按钮，以及范围下拉（例如50公里，100公里，150公里），但无法弄清楚如何做到这一点。我想知道如何使用我在数据... 查看详情
如何在经纬度半径范围内的 xml 文件中查找位置
...，但我找不到任何接近我正在寻找的东西。我有一个工作地图，可以根据一些标准对标记进行排序。我想介绍一个新的标准，我将能够在经纬度的半径距离内进行 查看详情
城市范围内的限制标记android谷歌地图
】城市范围内的限制标记android谷歌地图【英文标题】：LimitMarkerwithincitylimitandroidGoogleMaps【发布时间】：2020-10-1204:11:03【问题描述】：我有一个要求，其中标记应该放在点击谷歌地图android中城市范围内的地图上。如果用户点击城... 查看详情
在谷歌地图中围绕一个点绘制半径
】在谷歌地图中围绕一个点绘制半径【英文标题】：DrawradiusaroundapointinGooglemap【发布时间】：2010-10-2323:19:17【问题描述】：我正在使用GoogleMapsAPI并添加了标记。现在我想在每个标记周围添加一个10英里的半径，这意味着一个在缩... 查看详情
Rails 谷歌地图检查点是不是在一定半径内
】Rails谷歌地图检查点是不是在一定半径内【英文标题】：RailsgooglemapcheckifpointlieswithincertainradiusRails谷歌地图检查点是否在一定半径内【发布时间】：2012-06-2607:57:34【问题描述】：我有一个用户模型，它将用户的纬度和日志存储... 查看详情
使用markerclusterer v3获取谷歌地图范围内的标记列表
】使用markerclustererv3获取谷歌地图范围内的标记列表【英文标题】：Getalistofmarkersinboundsofgooglemapusingmarkerclustererv3【发布时间】：2014-02-2414:10:56【问题描述】：我目前有一个使用数据库数据填充的谷歌地图。我正在使用markerclusterer... 查看详情
如何在android地图中设置地图聚类的半径
】如何在android地图中设置地图聚类的半径【英文标题】：Howtosetradiusformapclusteringinandroidmaps【发布时间】：2016-09-0421:31:55【问题描述】：我是android开发的初学者，我正在研究androidmapsClustering，但是我无法设置集群半径，请谁能帮... 查看详情
如何在特定半径内的地图上显示点
...么是最好的解决方案：1-确定用户地理位置（例如maxmind？谷歌地图？）2-在地图上显示兴趣点（当前加载在GAE数据存储 查看详情
如何仅在地图上的半径（圆圈）内显示标记？
】如何仅在地图上的半径（圆圈）内显示标记？【英文标题】：Howtoshowmarkersonlyinsideofradius(circle)onmaps?【发布时间】：2018-09-2503:18:57【问题描述】：所有标记都显示在基于Firebase数据纬度和经度的地图上。我想在地图上只在圆圈内... 查看详情
【在线等】怎么在百度地图上查找方圆多少公里内的地方
...上怎么查找呢？或者我该使用什么软件！软件：googleearth(谷歌地球）找到标尺，选择圆然后在地图是点击圆心，拖动鼠标改变半径这是效果完成希望对你有帮助。参考技术A鼠标右键点击你所在位置--选择在附近找--输入方圆x公里... 查看详情
匹配两个给定标记内的所有文本
】匹配两个给定标记内的所有文本【英文标题】：Matchalltextwithintwogivenmarkers【发布时间】：2016-05-1014:07:30【问题描述】：假设我有两个自定义javascriptcmets。开始：//<!-，结束：//!>。我想替换这些标记之间的所有内容，... 查看详情
反向***地理标记查找
】反向***地理标记查找【英文标题】：Reversewikipediageotagginglookup【发布时间】：2009-09-0916:30:37【问题描述】：***是geotagginglotofitsarticles。（查看页面右上角。）有没有API可以查询某个地理位置指定半径内的所有geotaggedpages？更新好... 查看详情
如何在所有缩放级别中创建具有相同半径的谷歌地图 v3 圆？
】如何在所有缩放级别中创建具有相同半径的谷歌地图v3圆？【英文标题】：Howtocreatecircleingooglemapv3withsameradiusinallzoomlevel?【发布时间】：2012-07-2200:16:38【问题描述】：我正在将地图代码从v2迁移到v3。在v2中，我在GProjection和Overla... 查看详情