Fatal编程技术网
  • google-maps-api-3/
  • Google maps api 3 多个标记落入一个区域（多边形），我想在div面板中列出特定区域中所有标记的数据

Google maps api 3 多个标记落入一个区域（多边形），我想在div面板中列出特定区域中所有标记的数据

google-maps-api-3

Google maps api 3 多个标记落入一个区域（多边形），我想在div面板中列出特定区域中所有标记的数据,google-maps-api-3,google-fusion-tables,Google Maps Api 3,Google Fusion Tables,希望这是有意义的。我合并了两个表，一个包含电话交换机及其在英国的具体位置信息，另一个包含英国的地区信息。我想做的是，当我滚动或单击某个区域时，我希望能够在我的网页上的面板上列出属于该区域的所有交易所。当我单击某个区域时，将显示表中的最后一次交换。我猜这可能是我需要在addListeners2（）函数中执行的简单操作。任何指向正确方向的指示都将不胜感激 var map, layer; function initialize() { map = new google.maps.Ma

希望这是有意义的。我合并了两个表，一个包含电话交换机及其在英国的具体位置信息，另一个包含英国的地区信息。我想做的是，当我滚动或单击某个区域时，我希望能够在我的网页上的面板上列出属于该区域的所有交易所。当我单击某个区域时，将显示表中的最后一次交换。我猜这可能是我需要在addListeners2（）函数中执行的简单操作。任何指向正确方向的指示都将不胜感激

var map, layer;   
function initialize() 
{

    map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: new google.maps.LatLng(54.54658,-4.87793),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          loadPoint();            
    }  

        function loadPoint() 
        {
           if (layer != null) 
           {
                layer.setMap(null);
                google.maps.event.clearInstanceListeners(layer);
           }
           var tableid = '3569550';
           layer = new google.maps.FusionTablesLayer
           ({
                query: 
                {
                    select: 'LATITUDE',
                    from: tableid
                    //where: 'latitude is not null'
                },

            map: map                
           })
            layer.enableMapTips({
            select: "'REGION','EXCHANGE','MPF','WLR','SMPF','BB_CONNECT'", // list of columns to query, typially need only one column.
            from: tableid, // fusion table name
            geometryColumn: 'LATITUDE', // geometry column name
            suppressMapTips: true, // optional, whether to show map tips. default false
            delay: 100, // milliseconds mouse pause before send a server query. default 300.
            tolerance: 8 // tolerance in pixel around mouse. default is 6.
            });
            addListeners1();
        }

        function loadRegion() 
        {
           if (layer != null) 
           {
                layer.setMap(null);
                google.maps.event.clearInstanceListeners(layer);
           }
           var tableid = '3569550';
           layer = new google.maps.FusionTablesLayer
           ({
                query: 
                {
                    select: 'geometry',
                    from: tableid
                },

            map: map                
           })
            layer.enableMapTips({
            select: "'REGION','EXCHANGE','MPF','WLR','SMPF','BB_CONNECT'",
            from: tableid, // fusion table name
            geometryColumn: 'geometry', // geometry column name
            suppressMapTips: true, // optional, whether to show map tips. default false
            delay: 100, // milliseconds mouse pause before send a server query. default 300.
            tolerance: 8 // tolerance in pixel around mouse. default is 6.
            });
            addListeners2();
        }

        function addListeners1() 
        {
            google.maps.event.addListener(layer, 'mouseover', function(fEvent) 
            {
                var row = fEvent.row;
                myHtml = '<TABLE width = "600" cellspacing="0" cellpadding="0"><TR>';
                myHtml += '<TD><b>REGION</b></TD>';
                myHtml += '<TD><b>EXCHANGE</b></TD>';
                myHtml += '<TD><b>MPF</b></TD>';
                myHtml += '<TD><b>WLR</b></TD>';
                myHtml += '<TD><b>SMPF</b></TD>';
                myHtml += '<TD><b>BB_CONNECT</b></TD></TR><TR>';
                for (var x in row) 
                {
                    if (row.hasOwnProperty(x)) 
                    {
                        myHtml += '<td>' + row[x].value +'</td>';
                    }
                }
                myHtml += '</TR></TABLE>';
                document.getElementById('info').innerHTML = myHtml;
            });
        }

        function addListeners2() 
        {
            google.maps.event.addListener(layer, 'mouseover', function(fEvent) 
            {
                var row = fEvent.row;
                myHtml = '<TABLE width = "600" cellspacing="0" cellpadding="0"><TR>';
                myHtml += '<TD><b>REGION</b></TD>';
                myHtml += '<TD><b>EXCHANGE</b></TD>';
                myHtml += '<TD><b>MPF</b></TD>';
                myHtml += '<TD><b>WLR</b></TD>';
                myHtml += '<TD><b>SMPF</b></TD>';
                myHtml += '<TD><b>BB_CONNECT</b></TD></TR><TR>';
                for (var x in row) 
                {
                    if (row.hasOwnProperty(x)) 
                    {
                        myHtml += '<td>' + row[x].value +'</td>';
                    }
                }
                myHtml += '</TR></TABLE>';
                document.getElementById('info').innerHTML = myHtml;
            });
        }
}

var映射，层；
函数初始化（）
{
map=new google.maps.map（document.getElementById（'map_canvas'）{
中心：新google.maps.LatLng（54.54658，-4.87793），
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
加载点（）；
}  
函数loadPoint（）
{
如果（层！=null）
{
layer.setMap（空）；
google.maps.event.clearInstanceListeners（层）；
}
var tableid='3569550'；
图层=新建google.maps.FusionTablesLayer
({
查询：
{
选择“纬度”，
发件人：tableid
//其中：“纬度不为空”
},
地图：地图
})
layer.EnableMappings({
选择：“'REGION'、'EXCHANGE'、'MPF'、'WLR'、'SMPF'、'BB_CONNECT'”//要查询的列列表，通常只需要一列。
from:tableid，//融合表名称
geometryColumn:'纬度'，//几何列名称
suppressMapTips:true，//可选，是否显示映射提示。默认值为false
延迟：100，//在发送服务器查询之前，鼠标暂停毫秒。默认为300。
容差：8//鼠标周围像素的容差。默认值为6。
});
addListeners1（）；
}
函数loadRegion（）
{
如果（层！=null）
{
layer.setMap（空）；
google.maps.event.clearInstanceListeners（层）；
}
var tableid='3569550'；
图层=新建google.maps.FusionTablesLayer
({
查询：
{
选择“几何体”，
发件人：tableid
},
地图：地图
})
layer.EnableMappings({
选择：“'REGION'、'EXCHANGE'、'MPF'、'WLR'、'SMPF'、'BB_CONNECT'”，
from:tableid，//融合表名称
geometryColumn:'几何体'，//几何体列名
suppressMapTips:true，//可选，是否显示映射提示。默认值为false
延迟：100，//在发送服务器查询之前，鼠标暂停毫秒。默认为300。
容差：8//鼠标周围像素的容差。默认值为6。
});
addListeners2（）；
}
函数addListeners1（）
{
google.maps.event.addListener（层'mouseover'，函数（fEvent）
{
var行=fEvent.row；
myHtml=''；
myHtml+='区域'；
myHtml+=“交换”；
myHtml+=‘强积金’；
myHtml+='WLR'；
myHtml+=“SMPF”；
myHtml+='BB_CONNECT'；
对于（第行中的变量x）
{
if（第行hasOwnProperty（x））
{
myHtml+=''+行[x]。值+''；
}
}
myHtml+=''；
document.getElementById（'info'）。innerHTML=myHtml；
});
}
函数addListeners2（）
{
google.maps.event.addListener（层'mouseover'，函数（fEvent）
{
var行=fEvent.row；
myHtml=''；
myHtml+='区域'；
myHtml+=“交换”；
myHtml+=‘强积金’；
myHtml+='WLR'；
myHtml+=“SMPF”；
myHtml+='BB_CONNECT'；
对于（第行中的变量x）
{
if（第行hasOwnProperty（x））
{
myHtml+=''+行[x]。值+''；
}
}
myHtml+=''；
document.getElementById（'info'）。innerHTML=myHtml；
});
}
}
我不熟悉实用程序库，但文档显示它不支持where子句。哪种是有意义的。工具提示将与单个点或多边形关联。您需要where子句，即选择region=XXX的交换

我会尝试google.visualization库，它允许您执行这样的查询，或者您可以使用Fusion Table JSONP API，它也允许执行同样的查询。有一个可视化示例，有点不同，但可以修改为您想要做的处理程序。

我找到了解决方案

function loadRegion() 
{
    if (layer != null) 
    {
        layer.setMap(null);
        google.maps.event.clearInstanceListeners(layer);
    }
    layer = new google.maps.FusionTablesLayer
    ({
        query: 
        {
            select: 'geometry',
            from: tableid
        },
        map: map                
    })
    google.maps.event.addListener(layer, 'click', function(e) 
    {
        if (e && e.row && e.row["REGION"]) 
        {
            query4infowindowData(e.row["REGION"].value);
            infowindow.setPosition(e.latLng);
        } 
        else 
        {
            alert("no row:"+e.latLng);
        }
    });
}
function query4infowindowData(term) 
{
    var queryText = "SELECT 'REGION', 'EXCHANGE', 'MPF', 'WLR', 'BB_CONNECT', 'SMPF' FROM "+tableid+" WHERE 'REGION' = '"+term+"';";
    var encodedQuery = encodeURIComponent(queryText);
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + encodedQuery);
    query.send(openInfoWindow);
}
function openInfoWindow(response) 
{
    if (!response) 
    {
        alert('no response');
        return;
    }
    if (response.isError()) 
    {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    } 
    FTresponse = response;
    numRows = response.getDataTable().getNumberOfRows();
    numCols = response.getDataTable().getNumberOfColumns();
    var dataTable = response.getDataTable();
    var contents = "REGION: <u><b>"+dataTable.getValue(0,0)+"</b></u><br><table border='1'><tr><th>#</th><th>EXCHANGE</th><th>MPF</th><th>WLR</th><th>BB_CONNECT</th><th>SMPF</th></tr>";
    for(i = 0; i < numRows; i++) 
    {
        contents += "<tr><th>"+i+"</th><td>"+dataTable.getValue(i,1)
            +"</td><td>"+dataTable.getValue(i,2)
            +"</td><td>"+dataTable.getValue(i,3)
            +"</td><td>"+dataTable.getValue(i,4)
            +"</td><td>"+dataTable.getValue(i,5)
            +"</td></tr>";
    }
    contents += "</table>";
    document.getElementById('info').innerHTML = contents;

}

函数加载区域（）
{
如果（层！=null）
{
layer.setMap（空）；
google.maps.event.clearInstanceListeners（层）；
}
图层=新建google.maps.FusionTablesLayer
({
查询：
{
选择“几何体”，
发件人：tableid
},
地图：地图
})
google.maps.event.addListener（层，'click'，函数（e）
{
如果（e&&e.row&&e.row[“区域”]）
{
query4infowindowData（例如，行[“区域”]。值）；
信息窗口。设置位置（如板条）；
} 
其他的
{
警报（“无行：+e.latLng”）；
}
});
}
函数query4infowi