时间戳

首页 > 解决方案 > 将 Google json 地图标记限制为可查看的地图

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

问题描述

我有一种情况，我想限制来自在地图上显示谷歌地图标记的数据库的搜索结果。目前没有限制这一点的标准，但是可能存在有很多标记的情况，我想包含它。我收到 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);
    }

标签： jsongoogle-mapsgoogle-maps-markers

解决方案

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

在这里您可以了解有关距离矩阵 API的更多信息。请注意，仅当您超过每月提供的 200 美元免费信用额度时，您才可能需要为此付费。这是价格表供您参考。

推荐阅读