2017-04-05 70 views
-1

我的地图显示了json中的点,但我无法用下面的代码过滤这些点。我认为标记和过滤器之间应该有联系,但我不知道如何。marker.setVisible不是Google Maps中的函数

var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    scrollwheel: false, 
    zoom: 8 
}); 

var points = 'http://www.example.com/json.json'; 

$.getJSON(points, function(json1) { 
    $.each(json1, function(key, data) { 
     var latLng = new google.maps.LatLng(data.latlng.lat, data.latlng.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      category: data.category, 
      //icon: iconBase + data.posture + '.svg', 
      title: data.title 
     }); 
    }); 

    filterMarkers = function (posture) { 
     for (i = 0; i < json1.length; i++) { 
      marker = json1[i]; 
      // If is same category or category not picked 
      if (marker.category == category || category.length === 0) { 
       marker.setVisible(true); 
      } 
      // Categories don't match 
      else { 
       marker.setVisible(false); 
      } 
     } 
    } 
    $('.button-group a').click(function(e){ 
     var category = $(this).attr('data-filter'); 
     filterMarkers(category); 
    }); 

}); 

您有解决方法吗?

+1

什么是错误?你有什么步骤来解决这个问题? – Magix

+0

当我尝试点击一个过滤器锚('.button-group a')时,控制台返回一个错误'marker.setVisible不是一个函数' –

+3

'marker',您根据需要做了'marker.setVisible()'成为谷歌标记本身。它看起来像你试图在你的一个json元素'json1 [i]'上执行该函数。当您创建它们时,您需要将Google标记存储在数组中,然后在想要运行该函数时访问正确的数组项。 –

回答

0

好的,我理解下面的评论。要做到这一点,我把所有的标记放在一个数组中,我的过滤器作用在这个数组上

var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    scrollwheel: false, 
    zoom: 8 
}); 

var points = 'http://www.example.com/json.json'; 

$.getJSON(points, function(json1) { 
    var markers_array = []; 
    $.each(json1, function(key, data) { 
     var latLng = new google.maps.LatLng(data.latlng.lat, data.latlng.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      category: data.category, 
      //icon: iconBase + data.posture + '.svg', 
      title: data.title 
     }); 

     markers_array.push(marker); 

    }); 

    filterMarkers = function (posture) { 
     for (i = 0; i < markers_array.length; i++) { 
      marker = markers_array[i]; 
      // If is same category or category not picked 
      if (marker.category == category || category.length === 0) { 
       marker.setVisible(true); 
      } 
      // Categories don't match 
      else { 
       marker.setVisible(false); 
      } 
     } 
    } 
    $('.button-group a').click(function(e){ 
     var category = $(this).attr('data-filter'); 
     filterMarkers(category); 
    }); 
}); 
相关问题