0

我正在研究地图过滤，我正在使用jQuery Ui 地图插件。对于过滤，我使用以下代码：

$('#map_canvas').gmap({ 'center':new google.maps.LatLng(43.730531,-79.416927), 'callback': function() {

    $.getJSON( 'path to json', 'category=activity', function(data) { 

        $.each( data.markers, function(i, m) {

            $('#map_canvas').gmap('addMarker', { 'tag': [m.area], 'position': new google.maps.LatLng(m.latitude, m.longitude), 'center': new google.maps.LatLng(m.latitude, m.longitude), 'bounds': true } )

            .click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': m.content }, this); });


        });
    });

    $("#some").change(function() {
                            var bounds = new google.maps.LatLngBounds();
                            var tag = $(this).val();
                            if ( tag == '*' ) {
                                $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) {
                                    marker.setVisible(true); 
                                    bounds.extend(marker.position);
                                    marker.map.fitBounds(bounds);   
                                });
                            } else { 
                                $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) {
                                    if (isFound) {
                    marker.setVisible(true); 
                                        bounds.extend(marker.position);
                                        marker.map.fitBounds(bounds); 
                                    } else {  
                                        marker.setVisible(false);
                                    }
                                });
                            }
                            $('#map_canvas').gmap('option', 'center', bounds.getCenter());
                        });
                }
     });

因此，JSON 中的所有标记都将根据分配给选择框的标签过滤掉。

但我想要实现的是特定商店名称的onClick（在地图下方列出），只有该标记应该显示在地图上。

为此，我尝试使用 jQuery Ui Map 添加标记。但我认为我们不能使用.gmap超过一次。所以我使用了其他方法：

 $(".lstore").click(function() {

        var clat = $(this).attr('data-value-lat');
        var clng = $(this).attr('data-value-lng');
        var myLatlng = new google.maps.LatLng(clat,clng);
      var mapOptions = {
        zoom: 17,
        center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
       var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
      });
    });
    });

它按照我想要的结果工作。但问题是，通过使用上面的代码，我使用选择框制作的过滤器（其代码在这个问题的开头）不再工作（它工作直到我不工作单击任何商店名称）。

所以我想让过滤器和点击商店名称一样工作，它的标记也应该显示在地图上。

有没有其他选择？我怎样才能做到这一点？

4

1 回答 1

0

您不必重新加载地图。onClick 后清除标记并仅使用所选商店的标记重绘地图。
试试这个：
1）清除标记：

// To remove the marker from the map
marker.setMap(null);

2）然后用活动标记重新绘制地图。

// To add the marker to the map, call setMap();
marker.setMap(map);

PS：请var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);从您的点击功能中删除。您无需重新加载地图。在这种情况下，它既没有必要，在性能方面也没有效率。

此处有用的链接和示例：https ://developers.google.com/maps/documentation/javascript/markers#add

于 2015-03-13T22:06:46.970 回答