Question

我有这个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秒后（设置间隔），所有标记都会再次显示。如果有人能帮助我，我将不胜感激。

Answer 1

摆脱你的setMarker功能。

更新你的setInterval，只需调用filter_tcu即可。

更新filter_tcu函数以检查是否未选择过滤器，只显示标记。 e.g。

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

google marker过滤器使用json数据中的javascript

1 个答案: