以下代码根据圆形地图区域查询 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);
}