Question

我正在开发地图过滤，我正在使用 jQuery Ui Map插件。对于过滤，我使用下面的代码：

$('#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!'
      });
    });
    });

按照期望的结果工作。但问题是通过使用上面的代码，使用选择框（其代码位于此问题的开头）不再有效（直到我没有点击任何商店名称）。

所以我希望过滤器工作以及点击商店名称，它的标记也应该显示在地图上。

是否有替代？我怎样才能做到这一点？

Answer 1

您不必再次加载地图。 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);。您无需重新加载地图。在这种情况下既没有必要也没有效率。

有用的链接＆amp;例如：https://developers.google.com/maps/documentation/javascript/markers#add

jQuery Ui Map - 多次使用gmap方法

1 个答案: