Google maps api 3 谷歌地图Api/Fusiontables：从列表框映射_Google Maps Api 3_Listbox_Google Fusion Tables

Google maps api 3 谷歌地图Api/Fusiontables：从列表框映射

google-maps-api-3

Google maps api 3 谷歌地图Api/Fusiontables：从列表框映射,google-maps-api-3,listbox,google-fusion-tables,Google Maps Api 3,Listbox,Google Fusion Tables,下面是一张带有可融合图层的谷歌地图。包括一个具有数千个选择选项的列表框。为了简洁起见，我只列出了几个选项。用户可能不希望看到所有映射的位置，因此他们可能会选择一个或多个位置移动到右侧列表框，按下按钮后，按钮将映射所选位置。问题是，当多个选项向右移动时，按钮仅映射框中的顶部位置，或者如果您特别突出显示其中一个，它将映射该位置。很明显，我需要所有的地图。请给我一些指导，这样我就可以得到所有这些地图 <!DOCTYPE html> <html> <head>

下面是一张带有可融合图层的谷歌地图。包括一个具有数千个选择选项的列表框。为了简洁起见，我只列出了几个选项。用户可能不希望看到所有映射的位置，因此他们可能会选择一个或多个位置移动到右侧列表框，按下按钮后，按钮将映射所选位置。问题是，当多个选项向右移动时，按钮仅映射框中的顶部位置，或者如果您特别突出显示其中一个，它将映射该位置。很明显，我需要所有的地图。请给我一些指导，这样我就可以得到所有这些地图

<!DOCTYPE html>
<html>
  <head>
   <style>
#map-canvas { width:940px; height:625px; }
.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 type="text/javascript">
var map;
var layer_0;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(47.645036570200254, -100.426025390625),
    zoom: 7
  });
  var style = [
    {
      featureType: 'poi',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'transit',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];
  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });
  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');
  layer_0 = new google.maps.FusionTablesLayer({
    map: map
  });
}
function changeMap_0() {
  var whereClause;
  var searchString = document.getElementById('destSelect').value.replace(/'/g, "\\'");
  if (searchString != '--Select--') {
    whereClause = "'Well Name' = '" + searchString + "'";
  }
  layer_0.setOptions({
    query: {
      select: "'geometry'",
      from: "1xDlCWWj4WMCadzaua5bBss3UNLprGCnsS3H4vt0",
      where: whereClause
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>          

Click below buttons to move selected options right or left.<br>
<table>
<tbody><tr>
<td>
<select id="sourceSelect" size="10" multiple="">
<option value="1-H CHLOE  20-17">1-H CHLOE  20-17</option>
      <option value="101 FEDERAL  21X-24">101 FEDERAL  21X-24</option>
      <option value="13 MILE SWD  1">13 MILE SWD  1</option>
      <option value="2-BRENDEN  9-33 1-M">2-BRENDEN  9-33 1-M</option>
      <option value="20002 JV-P AGATE     1">20002 JV-P AGATE     1</option>
      <option value="20002 JV-P AGATE     2">20002 JV-P AGATE     2</option>
      </select>
</td>
<td>
    <button onclick="listboxMoveacross('sourceSelect', 'destSelect');">&gt;&gt;     </button>  <br>
    <button onclick="listboxMoveacross('destSelect', 'sourceSelect');">&lt;&lt;    </button>
</td>
<td>
<select id="destSelect" size="10" multiple="">
</select>
</td>
</tr>
</tbody></table><button id="mapbutton" onClick="changeMap_0(map);">Map     Locations</button>


<script>
function listboxMoveacross(sourceID, destID) {
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);

for(var count=0; count < src.options.length; count++) {

    if(src.options[count].selected == true) {
            var option = src.options[count];

            var newOption = document.createElement("option");
            newOption.value = option.value;
            newOption.text = option.text;
            newOption.selected = true;
            try {
                     dest.add(newOption, null); //Standard
                     src.remove(count, null);
             }catch(error) {
                     dest.add(newOption); // IE only
                     src.remove(count);
             }
            count--;
    }
  }
}
</script>
</body>
</html>

您必须迭代destSelect的选项，并根据这些选项的值创建IN条件：

function changeMap_0() {
  var query={
        select: "'geometry'",
        from: "1xDlCWWj4WMCadzaua5bBss3UNLprGCnsS3H4vt0"
      },
      values=[],
      options=document.getElementById('destSelect').options;

  if(!options.length){
     //no options added, remove the layer
     //and leave the function
    layer_0.setMap(null);
    return;
  } 

  //collect the values  
  for(var i =0;i<options.length;++i){
    values.push(options[i].value.replace(/'/g, "\\'"));
  }
  //create where-clause
  query.where="'Well Name' IN('"+values.join("','")+"')";

  //set the options  
  layer_0.setOptions({query:query,map:map}); 
}