0

我正在构建一个带有下拉菜单的 FusionTables 地图。我希望地图上的标记根据下拉菜单中的用户选择进行更改。每个菜单选择对应于融合表中“可能性”列的三个选项。我使用这些链接作为参考：

http://sportstleo12.appspot.com/和https://developers.google.com/fusiontables/docs/samples/change_query

我已经复制了代码，到目前为止，我可以获得所有要显示的选项，但它不会根据用户选择过滤结果。我确定这很简单。有任何想法吗？

这是到目前为止的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="UTF-8">

<title>Test Page 18</title>

<link href="/apis/fusiontables/docs/samples/style/default.css"

 rel="stylesheet" type="text/css">


<style>

body {
font-family: sans-serif;
background-image: url(images/squairy_light.png);
}

#main-container {
border: 1px solid;
border-color: #E0E0E0;
width:1280px;
margin: auto;
border-radius:3px;
padding-top: 15px;
background-color: white;
}
#map-canvas { 
    width:1250px; 
    height:600px; 
    margin: auto;
    }
#drop-down {
width:1250px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;

}
#title {
width:1280px;
margin: auto;
padding-top: 10px;
font: sans-serif;
}

.layer-wizard-search-label { font-family: sans-serif };

</style>



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script src="/path/to/fusiontips_compiled.js" type="text/javascript"></script>

<script type="text/javascript">


function initialize() {

var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ';
var locationColumn = 'Lat/Long';

var map = new google.maps.Map(document.getElementById('map-canvas'), {

center: new google.maps.LatLng(40, 345),

zoom: 3,

mapTypeId: google.maps.MapTypeId.ROADMAP

});

var layer = new google.maps.FusionTablesLayer({
      query: {
        select: locationColumn,
        from: tableId,
      },
      map: map,
    });

google.maps.event.addDomListener(document.getElementById('option-list'),
        'change', function() {
          updateMap(layer, tableId, locationColumn);
    });
  }

  // Update the query sent to the Fusion Table Layer based on
  // the user selection in the select menu
  function updateMap(layer, tableId, locationColumn) {
    var delivery = document.getElementById('option-list').value;
    if (delivery) {
      layer.setOptions({
        query: {
          select: locationColumn,
          from: tableId,
          where: "option-list = '" + delivery + "'"
        }
      });
    } else {
      layer.setOptions({
        query: {
          select: locationColumn,
          from: tableId
        }
      });
    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);


</script>


</head>

<body>



<div id="title"><h1>Possibility Options</h1></div>
<div id="main-container">

<div id="map-canvas"></div>



<div id="drop-down">

<label>Possibilities:</label>

<select id="option-list">

<option value="">--All Possibilities--</option>

<option value="Yes">Yes</option>

<option value="No">No</option>

<option value="Maybe">Maybe</option>


</select>
</div>

</div>



</body>

</html>
4

1 回答 1

0

我不知道我之前发布的代码有什么问题。我发现这个链接可以帮助我以不同的方式编写它并解决我的问题：

http://jsfiddle.net/odi86/vw4YC/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<meta charset="UTF-8">

<title>Test Page 18</title>

<link href="/apis/fusiontables/docs/samples/style/default.css"

rel="stylesheet" type="text/css">


<style>

body {
font-family: sans-serif;
background-image: url(images/squairy_light.png);
}

#main-container {
border: 1px solid;
border-color: #E0E0E0;
width:1280px;
margin: auto;
border-radius:3px;
padding-top: 15px;
background-color: white;
}
#map-canvas { 
    width:1250px; 
    height:600px; 
    margin: auto;
    }
#drop-down {
width:1250px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;

}
#title {
width:1280px;
margin: auto;
padding-top: 10px;
font: sans-serif;
}

.layer-wizard-search-label { font-family: sans-serif };

</style>



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script src="/path/to/fusiontips_compiled.js" type="text/javascript"></script>

<script type="text/javascript">

var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ';

var layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'Lat/Long',
        from: tableId,
      },
      styleId: 2,
      templateId: 2,
    });


function initialize() {


map = new google.maps.Map(document.getElementById('map-canvas'), {

center: new google.maps.LatLng(40, 345),

zoom: 3,

mapTypeId: google.maps.MapTypeId.ROADMAP

});
layer.setMap(map);
}


//Change the query based on the user's selection
function changeMap() {
    possibility = document.getElementById('Possibility').value;
    where = " Possibility LIKE '%" + possibility + "%'";

    layer.setOptions({
        query: {
            select: 'Lat/Long',
            from: tableId,
            where: where
        }
    });
}

  google.maps.event.addDomListener(window, 'load', initialize);


</script>


</head>

<body>



<div id="title"><h1>Possibility Options</h1></div>
<div id="main-container">

<div id="map-canvas"></div>



<div id="drop-down">

<label for="Possibility">Possibilities:</label>

<select id="Possibility" onChange="changeMap();">

<option value="">--All Possibilities--</option>

<option value="Yes">Yes</option>

<option value="No">No</option>

<option value="Maybe">Maybe</option>


</select>
</div>

</div>



</body>

</html>
于 2013-08-21T20:48:17.793 回答