谷歌标记过滤器使用javascript从json数据
google marker filter using javascript from json data
我有这个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) {
相关文章:
- Javascript JSON.parse not working
- Javascript:JSON请求仅在第一次工作
- 定义this.properties或objectName.properties的javascript JSON对象
- Javascript/JSON警报返回Undefined
- 使用XPath样式访问Javascript JSON对象属性
- JavaScript JSON关联对象键和值都作为日期时间戳
- Javascript-JSON-嵌套和分组
- Javascript json返回未定义
- 无标题Javascript JSON数组->CSV导出
- Javascript JSON对象替换对象中的字符串
- Javascript/Json日期转换问题
- 使用jstl c:forEach在迭代jsp bean上创建javascript json对象
- 为什么我的JavaScript / JSON脚本不能在Internet Explorer中工作
- 将数据从 Python 发送到 Javascript (JSON)
- JavaScript Json 值追加基于相等条件
- 在设置用户后,从 JavaScript JSON 请求中获取 Web 服务 (asmx) ASP.NET Windows
- JavaScript - JSON 数据结构的构建 - 如何使用变量值更改键名
- Javascript JSON 解析和字符串化用于多级
- 如何将数据 php 更改为 javascript json
- Javascript JSON 到 Excel 文件下载