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

问题描述

我遇到一种情况，我想限制来自在地图上显示Google地图标记的数据库的搜索结果。当前没有任何标准可以限制这一点，但是在有许多标记的情况下我可能会采取警惕措施，我想对此加以限制。我收到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);
    }

解决方法

由于您已经有了一组使用地理定位的标记及其位置（纬度/经度）以及设备的位置，并且您只想将标记放置在距设备原点一定半径内，那么您可以做的是比较标记和设备位置之间的距离。您可以为此使用距离矩阵API。 DM API可以使用X号。地址，纬度/经度坐标或地点ID形式的起点和终点位置。因此，例如，您有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
    }
}

在这里您可以详细了解Distance Matrix API。请注意，仅当您每月超过200美元的免费赠送金额时，您还可能需要为使用此功能付费。这是pricing sheet供您参考。

google-maps google-maps-markers json