谷歌标记过滤器使用javascript从json数据

google marker filter using javascript from json data

本文关键字:javascript json 数据 过滤器 谷歌      更新时间:2023-09-26

我有这个json对象:

{
   "tcu_pos_list": [
      {
         "latitude":"23",
         "tcu_id":1,
         "longitude":"23"
      },
      {
         "latitude":"11",
         "tcu_id":4,
         "longitude":"11"
      },
      {
         "latitude":"3",
         "tcu_id":5,
         "longitude":"34"
      }
   ]
}

为了设置地图中的所有标记,我创建了以下功能:

var map;
var marker = [];
function setMarker() {
    $.getJSON('http://127.0.0.1:8000/locator/tcu/position/', function(car_pos) {
        for (var i = 0; i < car_pos["tcu_pos_list"].length; i++){
            marker [i] = new google.maps.Marker({
                map: map,
            });
            var userLat = car_pos["tcu_pos_list"][i].latitude;
            var userLon = car_pos["tcu_pos_list"][i].longitude;
            var position = new google.maps.LatLng(userLat,userLon);
            marker[i].setPosition(position);
            map.setCenter(position);
        }
    });
}

我想检查我的Json对象是否有新的位置,所以我每5秒检查一次:

setInterval(function() {
    setMarker();
}, 5000);

这是很好的工作,问题是当我试图过滤一个谷歌标记。其想法是选择一个tcu_id并仅显示该标记位置。

为此,我在html选择器中创建了一个函数onchange。

<div class="select-style">
    <select id="Selector" onchange="filter_tcu()">
        <option value="">Please select
        <option value="1">1
        <option value="4">4
        <option value="5">5
    </select>
</div>
<script>
function filter_tcu() {
    var tcu_id = document.getElementById("Selector").value;
    console.log(tcu_id)
    $.getJSON('http://127.0.0.1:8000/locator/tcu/position/', function(car_pos) {
        for (var i = 0; i < car_pos["tcu_pos_list"].length; i++){
            if( tcu_id == car_pos["tcu_pos_list"][i].tcu_id) {
                marker [i] = new google.maps.Marker({
                    map: map,
                });
                var userLat = car_pos["tcu_pos_list"][i].latitude;
                var userLon = car_pos["tcu_pos_list"][i].longitude;
                var position = new google.maps.LatLng(userLat,userLon);
                marker[i].setPosition(position);
                map.setCenter(position);
            }
            else {
                marker [i].setMap(null);
            }
        }
    });
}

当我选择一个值时,标记会被过滤,但在5秒后(设置"间隔"),所有标记都会再次显示。如果有人能帮我,我将不胜感激。

去掉您的setMarker函数。

更新您的setInterval,改为只调用filter_tcu。

更新filter_tcu函数以检查是否未选择过滤器,只显示标记。例如

if (tcu_id.length == 0 || tcu_id == car_pos["tcu_pos_list"][i].tcu_id) {