如何显示可以出现在红色圆圈中的最近标记？
Posted
技术标签:
【中文标题】如何显示可以出现在红色圆圈中的最近标记？【英文标题】：How to display the closest markers that can appear in a red circle? 【发布时间】：2020-01-04 09:11:30 【问题描述】：我想显示最近的标记最远 100 米并显示在一个红色圆圈中，直到现在我的代码仍然显示所有标记。
所以基本上我想显示离我指定的位置最近的标记并出现在红色圆圈内，而红色圆圈外的那些将不会显示。
如果有人能帮我解决问题，我会很高兴
function createMarker()
var bounds = new google.maps.LatLngBounds(); // diluar looping
for (i = 0; i < markers.length; i++)
pos = new google.maps.LatLng(markers[i][3], markers[i][4]);
bounds.extend(pos); // di dalam looping
gambar = image2;
marker = new google.maps.Marker(
position: pos,
map: map,
title: markers[i][0],
icon: gambar
);
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
var dataoutlet = "cek";
infowindow.setContent(dataoutlet);
infowindow.open(map, marker, dataoutlet);
)(marker, i));
map.fitBounds(bounds); // setelah looping
var markers = [
["Cemerlang Kemindo Abadi. PT", "Kota Kosong", "Jl. Taman Siswa No.35/43, Wirogunan, Mergangsan, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55111, Indonesia", -7.8066567, 110.3778149],["Transportasi Sari Rejeki", "Kota Kosong", "Jl. Dr. Soeradji Tirtonegoro No.190, Punden, Sumberejo, Klaten Sel., Kabupaten Klaten, Jawa Tengah 57424, Indonesia", -7.7172799, 110.5841084],["RENTAL ALAT BERAT(DTS)", "Kota Kosong", "Dusun DADIREJO, Dusun II, Tlingsing, Cawas, Kabupaten Klaten, Jawa Tengah, Indonesia", -7.750473, 110.744113],["RENTAL FORKLIFT 24 JAM JOGJA - YOGYAKARTA", "Kota Kosong", "Jl. Imogiri Barat KM 4,5 No. 42, Tanjung, Bangunharjo, Sewon, Bantul, Daerah Istimewa Yogyakarta 55188, Indonesia https://mitrakaryaforklift.co.id/", -7.8342519, 110.3743642],
];
var map;
var infowindow;
var image = '1.png';
var image2= '0.png';
function initialize()
var pusatRadius = new google.maps.LatLng(-7.805817, 110.377857);
map = new google.maps.Map(document.getElementById('map'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pusatRadius,
zoom: 17
);
var PusatMarker = new google.maps.Marker(
position: pusatRadius,
map: map,
icon: image,
title:'Lokasi Properti'
);
var circle = new google.maps.Circle(
map: map,
radius: 100, // in metres
fillColor: '#AA0000'
);
circle.bindTo('center', PusatMarker, 'position');
var request =
location: pusatRadius,
radius: 100 /* jarak meter */
;
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
function callback(results, status)
if (status == google.maps.places.PlacesServiceStatus.OK)
for (var i = 0; i < results.length; i++)
createMarker(results[i]);
function createMarker()
var bounds = new google.maps.LatLngBounds(); // diluar looping
for (i = 0; i < markers.length; i++)
pos = new google.maps.LatLng(markers[i][3], markers[i][4]);
bounds.extend(pos); // di dalam looping
gambar = image2;
marker = new google.maps.Marker(
position: pos,
map: map,
title: markers[i][0],
icon: gambar
);
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
var dataoutlet = "cek";
infowindow.setContent(dataoutlet);
infowindow.open(map, marker, dataoutlet);
)(marker, i));
map.fitBounds(bounds); // setelah looping
google.maps.event.addDomListener(window, 'load', initialize);#map
height: 600px;
width: 100%;
border: 1px solid #333;
margin-top: 0.6em;
<!doctype html>
<html>
<head>
<title>"Auto Detect" Lokasi Sekitar Google Maps</title>
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
</head>
<body>
<div id="map"></div>
</body>
</html>【问题讨论】：
【参考方案1】：不确定您使用位置服务的目的，您没有使用返回的结果
要判断标记是否在圆圈中，请使用geometry library computeDistanceBetween 方法：
for (i = 0; i < markers.length; i++)
pos = new google.maps.LatLng(markers[i][3], markers[i][4]);
if (google.maps.geometry.spherical.computeDistanceBetween(pos, circle.getCenter()) < circle.getRadius())
相关问题：Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?
proof of concept fiddle
代码 sn-p：
var markers = [
["Cemerlang Kemindo Abadi. PT", "Kota Kosong", "Jl. Taman Siswa No.35/43, Wirogunan, Mergangsan, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55111, Indonesia", -7.8066567, 110.3778149],
["Transportasi Sari Rejeki", "Kota Kosong", "Jl. Dr. Soeradji Tirtonegoro No.190, Punden, Sumberejo, Klaten Sel., Kabupaten Klaten, Jawa Tengah 57424, Indonesia", -7.7172799, 110.5841084],
["RENTAL ALAT BERAT(DTS)", "Kota Kosong", "Dusun DADIREJO, Dusun II, Tlingsing, Cawas, Kabupaten Klaten, Jawa Tengah, Indonesia", -7.750473, 110.744113],
["RENTAL FORKLIFT 24 JAM JOGJA - YOGYAKARTA", "Kota Kosong", "Jl. Imogiri Barat KM 4,5 No. 42, Tanjung, Bangunharjo, Sewon, Bantul, Daerah Istimewa Yogyakarta 55188, Indonesia https://mitrakaryaforklift.co.id/", -7.8342519, 110.3743642],
];
var map;
var infowindow;
var image = '1.png';
var image2 = '0.png';
function initialize()
var pusatRadius = new google.maps.LatLng(-7.805817, 110.377857);
map = new google.maps.Map(document.getElementById('map'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pusatRadius,
zoom: 17
);
var PusatMarker = new google.maps.Marker(
position: pusatRadius,
map: map,
// icon: image,
title: 'Lokasi Properti'
);
var circle = new google.maps.Circle(
map: map,
radius: 100, // in metres
fillColor: '#AA0000'
);
circle.bindTo('center', PusatMarker, 'position');
var request =
location: pusatRadius,
radius: 100 /* jarak meter */
;
infowindow = new google.maps.InfoWindow();
createMarker(circle);
function createMarker(circle)
var bounds = new google.maps.LatLngBounds(); // diluar looping
for (i = 0; i < markers.length; i++)
pos = new google.maps.LatLng(markers[i][3], markers[i][4]);
if (google.maps.geometry.spherical.computeDistanceBetween(pos, circle.getCenter()) < circle.getRadius())
bounds.extend(pos); // di dalam looping
gambar = image2;
marker = new google.maps.Marker(
position: pos,
map: map,
title: markers[i][0],
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
);
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
var dataoutlet = "cek";
infowindow.setContent(dataoutlet);
infowindow.open(map, marker, dataoutlet);
)(marker, i));
map.fitBounds(circle.getBounds()); // setelah looping
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map
height: 100%;
width: 100%;
border: 1px solid #333;
margin: 0;
padding: 0;
<title>"Auto Detect" Lokasi Sekitar Google Maps</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>
<div id="map"></div>【讨论】：
以上是关于如何显示可以出现在红色圆圈中的最近标记？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过Matlab检测红色圆圈中不规则放置的瓶子，同时排除那些规则圆形瓶子？