谷歌地圖Api/Fusiontables：從列表框中映射

下面是一個帶有FusionTable圖層的Google地圖。包括有數千個選擇選項的列表框。爲了簡潔起見，我只包括幾個選項。用戶可能不希望看到所有映射的位置，因此他們可以選擇一個或多個位置移動到右側列表框，在按下按鈕時，按鈕將映射選擇的位置。問題是，當多個選擇移動到右側時，該按鈕僅映射框中的頂部位置，或者如果您特別突出顯示其中一個，它將映射該位置。顯然我需要他們都映射。請給出一些指導，以便我可以得到所有這些映射。谷歌地圖Api/Fusiontables：從列表框中映射

<!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>

來源

2014-01-14 user1871068

您必須遍歷#destSelect的選項，打造一個IN() -condition基於這些選項的值：

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}); 
}

來源

2014-01-14 06:59:53

這工作完全一樣，我需要。謝謝。 – user1871068

谷歌地圖Api/Fusiontables：從列表框中映射

回答

相關問題