Question

以下代码根据圆形地图区域查询Google融合表。

圆形地图区域的中心由用户点击的位置确定，半径由下拉菜单中的选择确定。我有一个监听器设置，以便当用户点击映射点时，会出现一个信息框，显示来自相应融合表行的信息。

这一切都正常，直到我向地图添加一个圆圈（向用户说明他们选择了哪个区域），似乎圆圈的存在阻挡了图层的点击事件监听器。我试过改变z-index无济于事。任何人都可以建议解决这个问题吗？

function initialize() {     

        tableid = xxxxxxx;

              // Initialize the Google Map
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
          center: new google.maps.LatLng(37.3, -122.3),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP   
                                                                               });                                                                        
        var layer = new google.maps.FusionTablesLayer({     
          query: {
            select: 'Address',
            from: tableid,
            where: 'ST_INTERSECTS(Address, CIRCLE(LATLNG(37.3, -122.3), 5000))'
                  }
                                                      });
        layer.setMap(map);
        layer.index = 1;
        map.index =2;
        var meters = 5000;
        var center = map.getCenter();

        // Update the radius when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('radius'), 'change', function() {  
          meters = parseInt(this.value, 10);
          circle.setRadius(meters);
          searchStr = 'ST_INTERSECTS(Address, ' +'CIRCLE(LATLNG'+center+', ' + meters + '))'
          searchStr += " AND " + "filter_1 IN ("+filterSelection+")";
            layer.setOptions({
              query: {
                select: 'Address',
                from: tableid,
                where: searchStr 
                      }
                              }); 
                                                                                                  });                                                                                                                                                                                                                                       //Update the filter when the user makes a selection.
        google.maps.event.addDomListener(document.getElementById('filter'),'change', function() {
          filterSelection = this.value;
          searchStr = 'ST_INTERSECTS(Address, ' + 'CIRCLE(LATLNG'+center+', ' + meters + '))'
          searchStr += " AND " + "filter_1 IN ("+filterSelection+")";
            layer.setOptions({
              query: {
                select: 'Address',
                from: tableid,
                where: searchStr
                      } 
                              });
                                                                                                    });  

        //Info Box Populate click handler
        google.maps.event.addListener(layer, 'click', function(e) {
          alert("Info Click");
          e.infoWindowHtml = e.row['Title'].value + "<br>";  
                                                                   });
        //Click Handler
        google.maps.event.addListener(map, 'click', function(e) {
          circle.setCenter(e.latLng);
          center = e.latLng;
          searchStr = 'ST_INTERSECTS(Address, ' + 'CIRCLE(LATLNG'+e.latLng+', ' + meters + '))'
          searchStr += " AND " + "filter_1 IN ("+filterSelection+")";
             layer.setOptions({
               query: {
                 select: 'Address',
                 from: tableid,
                 where: searchStr
                        }
                               });
                                                                   });    
        // Create a map circle object to visually show the radius.
        var circle = new google.maps.Circle({
          center: new google.maps.LatLng(37.3, -122.3),
          radius: 5000,
          map: map,
          fillOpacity: 0.1,
          strokeOpacity: 0.5,
          strokeWeight: 1
                                             });
        circle.index = 0;
        circle.setmap(map);
                        }

Answer 1

创建圈子时，请尝试添加CircleOptions对象clickable: false

Google Fusion地图：圈子阻止图层点击事件，javascript

1 个答案: