将Google json地图标记限制为可查看的地图

Question

我有一种情况，我想限制来自在地图上显示谷歌地图标记的数据库的搜索结果。目前没有限制这一点的标准，但可能存在有许多标记的情况，我想包含这一点。我收到了JSON中的标记——过滤这些标记(比如用户当前位置2公里(的最佳做法是什么？

我的直觉是在生成时使用实际的JSON数据来实现这一点，但如果能在这里提出最佳实践的想法，我将不胜感激，因为在SO方面没有太多指导。

谢谢！

代码如下：

function showMarkers(str) {
if (str == "") {
document.getElementById("products").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//$('#mapMarkerPositions').html(this.responseText);
let data = JSON.parse(this.responseText);
merchantMarkers = [];
for (let i = 0; i < data.length; i++) {
merchantMarkers[i] = data[i];
}
resetMarker();
reloadMarkers();

}
}
xmlhttp.open("GET", "filterMarkers.php?s=" + str, true);
xmlhttp.send();
}

然后对于实际地图：

<div id="merchantLocations">
<script>
var map;
var markers = [];
var merchantMarkers = [];
</script>
</div>

(此之间的附加代码(

setMarkers(merchantMarkers);
var infowindow = new google.maps.InfoWindow({})
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
}
function setMarkers(locations) {
var infowindow = new google.maps.InfoWindow({});
for (var i = 0; i < locations.length; i++) {
var merchant = locations[i];
var myLatLng = new google.maps.LatLng(merchant[1], merchant[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icons.icon,
label: merchant[4]
});

/* ****************** */
map.panTo(myLatLng);
/* ****************** */
google.maps.event.addListener(
marker,
'click',
(function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker)
}
})(marker, i));
markers.push(marker);
}
}
function resetMarker() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
function reloadMarkers() {
setMarkers(merchantMarkers);
}

Answer 1

由于您已经有了一组标记及其位置(lat/lng(以及使用Geolocation的设备位置，并且您只想将标记放置在距离设备原点一定半径的范围内，因此您可以比较标记与设备位置之间的距离。您可以为此使用距离矩阵API。DM API可以以地址、纬度/经度坐标或地点ID的形式接收X个原点和目的地。因此，例如，您有1个原点(设备的位置(和多个目的地(标记(。这将为您提供您的出发地和每个目的地之间的距离结果。例如：

https://maps.googleapis.com/maps/api/distancematrix/json?origins=40.6655101,-73.89188969999998&destinations=40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.6905615%2C-73.9976592%7C40.659569%2C-73.933783%7C40.729029%2C-73.851524%7C40.6860072%2C-73.6334271%7C40.598566%2C-73.7527626%7C40.659569%2C-73.933783%7C40.729029%2C-73.851524%7C40.6860072%2C-73.6334271%7C40.598566%2C-73.7527626&key=YOUR_API_KEY

在得到它们之间的距离后，您可以添加一个简单的if语句：

let result = JSON.parse(this.responseText);
//iterate through all the markers
for(i = 0 ; i <= no_of_markers ; i++ ){
//only show markers that are <= to 2km 
if (result.rows[0].elements[i].distance.value <= 20000){
//Show Marker
}
}

在这里，您可以了解有关距离矩阵API的更多信息。请注意，只有当您每月超过200美元的免费信用额度时，您也可能会因使用此功能而被收取费用。这是价格表供您参考。