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

Posted 2023-03-28

【中文标题】将 Google json 地图标记限制为可查看的地图

【英文标题】：Limit Google json map markers to viewable map

【发布时间】：2020-12-31 15:04:31

【问题描述】：

我有一种情况，我想限制来自在地图上显示 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);
    

【参考方案1】：

由于您已经有一组标记及其位置（纬度/经度）以及使用地理定位的设备位置，并且您只想将标记放置在距设备原点一定半径范围内，那么您可以做的是比较标记和设备位置之间的距离。您可以为此使用距离矩阵 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供您参考。