Google Fusion Map: Круги, блокирующие события нажатия на слой, JavaScript - PullRequest
2 голосов
/ 26 января 2012

Следующий код запрашивает таблицу Google Fusion на основе области круговой карты.

Центр области круговой карты определяется тем, где пользователь щелкает, а радиус определяется выбором из выпадающего меню.У меня есть прослушиватель, настроенный таким образом, что, когда пользователь нажимает на сопоставленную точку, появляется информационное окно с информацией из соответствующей строки таблицы слияния.

Это все работает нормально, пока я не добавлю круг на свою карту (чтобы проиллюстрировать пользователю, какой регион он выбрал), кажется, что присутствие круга блокирует прослушиватель событий нажатия слоя.Я пытался изменить 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);
                        }

1 Ответ

11 голосов
/ 26 января 2012

Когда вы создаете круг, попробуйте добавить к объекту CircleOptions clickable: false

...