Question

大家好，并提前感谢您的意见和建议。

1 - 我在可下载和公共表“1wPUbMMUyZQkrodr7zk6-_mYJmH4RPc48NvDuzBY”中过滤两列（通道和扇区）时遇到问题

2 - 表格中的样式不会显示在地图上。

这是我正在使用的代码。请随时提出建议或更正。

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Malawi EN</title> 
    <!-- Style --> 
   <style> 
    body { font-family: Arial, sans-serif; }
    #map_canvas { height: 700px; width:1056px; }
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 

    var tableid = "1wPUbMMUyZQkrodr7zk6-_mYJmH4RPc48NvDuzBY";
    var layer = new google.maps.FusionTablesLayer(tableid);
    function initialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(-13.731381,34.002686),
    zoom: 7,
    mapTypeControl: true,
    panControl: false,
    zoomControl: true,
               zoomControlOptions: {
               style: google.maps.ZoomControlStyle.SMALL

    },

    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl:false
    });
    layer.setMap(map);

   }

   //Change the query based on the user's selection
   function changeMap(sector, channel) {
   sector = document.getElementById('sector').value;
   channel = document.getElementById('channel').value;
   layer.setQuery("SELECT lat FROM " + tableid + " WHERE sector MATCHES '%" + sector + "%' AND      channel MATCHES '" + channel + "'");
    }
    </script> 
    </head> 
    <body onLoad="initialize();"> 
    <h3>Malawi</h3> 


      Channel of Aid: <select id="channel" onChange="changeMap();"> 
      <option value="%">  All  </option> 
      <option value="bilateral">Bilateral</option> 
      <option value="multilateral">Multilateral</option> 
      <option value="partnership">Partnership</option> 
     </select> 

         Sector: <select id="sector" onChange="changeMap();"> 
        <option value="%"> All  </option> 
       <option value="Improving health">Improving health</option> 
       <option value="Private sector development">Private sector development</option> 
       <option value="Environment">Environment</option> 
       <option value="Democratic governance">Democratic governance</option> 
       <option value="Strengthening basic education">Strengthening basic education</option> 
      <option value="Peace and security">Peace and security</option> 
      <option value="Emergency assistance">Emergency assistance</option> 
      <option value="Other">Other</option> 
     </select> 

    <div id="map_canvas"></div> 
    </body> 
    </html>

Answer 1

您的代码中有很多小错误，我创建了working example of your code on jsFiddle。

您需要正确初始化FusionTablesLayer。它需要一个配置对象，您可以在其中定义要使用的查询或要应用的样式等内容：

var tableid = "1wPUbMMUyZQkrodr7zk6-_mYJmH4RPc48NvDuzBY";

    var layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'lat',
            from: tableid
        },
        styleId: 2,
        templateId: 2
    });

styleId定义元素在页面上的外观，id为2的样式是您在Fusion Table中定义的样式。 templateId定义应该为InfoWindow使用哪个模板（当您点击地图上的项目时）。同样，id 2是你定义的那个。

过滤部分几乎是正确的，除了您使用的旧语法不能再与加密表ID一起使用。我使用layer.setOptions：

修复了新语法

function changeMap() {
    sector = document.getElementById('sector').value;
    channel = document.getElementById('channel').value;
    where = " sector LIKE '%" + sector + "%'";
    where += " AND channel LIKE '%" + channel + "%'";

    layer.setOptions({
        query: {
            select: 'lat',
            from: tableid,
            where: where
        }
    });
}

过滤器查询融合表不起作用

1 个答案: