0
我試圖讓這個谷歌地圖平移和縮放到選定的下拉選項。下拉式查詢本身正在工作，但我是編碼新手，我無法弄清楚代碼中出現什麼問題才能讓地圖平移並縮放到查詢結果。列標題是谷歌融合表上的「查詢」，所以我感到困惑。Fusion Table圖層下拉查詢平移和縮放不起作用
這裏是什麼，我希望地圖做一個例子： http://www.geocodezip.com/geoxml3_test/www_advocacy_ucla_edu_Assembly_MapC.html
，這就是我得到的平移/縮放代碼的部分來自： http://www.geocodezip.com/geoxml3_test/v3_SO_FusionTables_pan2Marker.html
而且，這裏是我的代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<!-- <link href="style.css" rel="stylesheet" /> -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '15wosKAeHC0gcpU_N6UPbxPL09RrEBKlQNEaCmnU';
var locationColumn = 'Lat';
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng(34.03,-111.9),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: locationColumn,
from: tableId
},
options: {
styleId: 3,
templateId: 3
}
});
layer . setMap (map);
google.maps.event.addDomListener(document.getElementById('Query'),
'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 query = document.getElementById('Query').value;
if (query) {
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
where: "Query = '" + query + "'"
}
});
panToMarker(Query, tableId, locationColumn);
} else {
layer.setOptions({
query: {
select: locationColumn,
from: tableId
}
});
}
}
function panToMarker(Query, tableId, locationColumn) {
var queryStr = "SELECT "+locationColumn+" FROM "+tableId+" WHERE Query = "+Query+";";
document.getElementById('query').innerHTML = queryStr;
var queryText = encodeURIComponent(queryStr);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(panTo);
}
function panTo(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
var geoXml = new geoXML3.parser();
var kml = FTresponse.getDataTable().getValue(0,0);
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
geoXml.docs[0].markers[0].setMap(null);
map.setCenter(geoXml.docs[0].markers[0].getPosition());
if (map.getZoom() < 10) map.setZoom(10);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="wrapper">
<table>
<tr>
<td>
<div id="menu" style="background-color:#EFE0B9;height:500px;width:150px;float:left;">
<label><b>Select:</b></label>
<select id="Query">
<option value="Bishop Creek">Bishop Creek</option>
<option value="Blue Spring">Blue Spring</option>
<option value="Blue Wash">Blue Wash</option>
<option value="Bronco Creek">Bronco Creek</option>
<option value="Camp Creek">Camp Creek</option>
<option value="Cave Creek">Cave Creek</option>
<option value="Columbine Spring">Columbine Spring</option>
<option value="Copper Creek">Copper Creek</option>
<option value="Cottonwood Creek">Cottonwood Creek</option>
<option value="Davenport Wash">Davenport Wash</option>
<option value="Deadman Creek">Deadman Creek</option>
<option value="Grapevine Canyon">Grapevine Canyon</option>
<option value="Holmes Canyon">Holmes Canyon</option>
<option value="Horse Creek">Horse Creek</option>
<option value="Jacks Gulch">Jacks Gulch</option>
<option value="Lime Creek upper">Lime Creek upper</option>
<option value="Lime Creek lower">Lime Creek lower</option>
<option value="Mud Spring">Mud Spring</option>
<option value="New River">New River</option>
<option value="Rackensack Canyon">Rackensack Canyon</option>
<option value="Red Creek">Red Creek</option>
<option value="Red Creek Middle">Red Creek Middle</option>
<option value="Round Tree Canyon">Round Tree Canyon</option>
<option value="Seven Springs">Seven Springs</option>
<option value="Silver Creek">Silver Creek</option>
<option value="Sheep Creek">Sheep Creek</option>
<option value="Squaw Creek">Squaw Creek</option>
<option value="Sycamore Creek">Sycamore Creek</option>
<option value="Sycamore Creek HK Ranch">Sycamore Creek HK Ranch</option>
<option value="Tangle Creek">Tangle Creek</option>
<option value="Two Mile Spring">Two Mile Spring</option>
<option value="Verde River">Verde River</option>
<option value="Walnut Spring">Walnut Spring</option>
<option value="Wet Bottom Creek">Wet Bottom Creek</option>
</select>
<br><br><br><br><br><br><br>
</td>
<td>
<div id="googft-mapCanvas" style="width:700px; height:600px;">
</td>
</div>
</body>
</html>
我不知道我做錯了什麼，我真的很感激，如果任何人都可以指出我在正確的方向！ = d
第1步 - 看看JavaScript錯誤您的瀏覽器正在報告：錯誤：查詢未定義 – geocodezip