0
다른 퓨전 테이블을 사용하는 사이트를 만들려고합니다. 몇 가지 상태가있는 드롭 다운 메뉴가 있습니다. 각 주마다 고유 한 퓨전 테이블이 있습니다.Fusion Tables 및 Google Maps API에서 드롭 다운 메뉴 선택에 따라 테이블 레이어 및지도 위치를 변경하려면 어떻게해야합니까?
상태를 선택하면 해당 상태의 '퓨전 테이블'이로드되도록 만들려고합니다.
어떻게하면됩니까?
아래는 내 JavaScript 코드입니다 (파일 이름은 'script.js'). 아래는 HTML 코드입니다.
드롭 다운을 통해 상태를 변경하면 드롭 다운에서 상태의 퓨전 테이블지도를로드하는지도를 원합니다. 지금 당장은 그렇게하지 않습니다.
$(document).ready(function(){
var states = {
'Alabama':'3348442',
'Alaska':'3370522'
};
// SECTION 1: ADDING HTML TO DOM
var bodyDivs = [
'<div id="map-canvas" />',
'<div id="address-form-container" />',
'<div id="state-select-container"><select id="state-select" /></div>'
];
var addressContainer = [
'<span id="form pretext"> Enter a city name or address </span>',
'<input id="address" type="textbox" />',
'<input type="button" value="Search" />'
];
// Append the body to <html>
$('html').append('<body />');
for (var i=0; i<bodyDivs.length; i++){
$('body').append(bodyDivs[i]);
};
// Append the address form to <body>
for (var i=0; i<addressContainer.length; i++){
$('div#address-form-container').append(addressContainer[i]);
};
// Append state names to the body
for (var state in states){
$('select').append('<option value='+state+'>'+state+'</option>');
};
// DONE ADDING HTML TO DOM
// SECTION 2: Create the Google map with the coordinates and add the Fusion Tables layer to it. Plus, it zooms and centers to whatever state is selected.
var geocoder;
var gmap;
var locationColumn = "'geometry'";
var condition = "'Median income (dollars)'>0";
var selectedState = document.getElementById("state-select").value;
var tableId = states[selectedState];
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize(){
geocoder = new google.maps.Geocoder(); // This variables is used to automate zooming and centering in this script
gmap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // Removing this removes the Google Maps layer, but would keep any layers on top of it
// The Fusion Tables layer variable
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId,
where: condition
}
});
// This code snippet centers and zooms the map to the selected state.
geocoder.geocode(
{
'address':selectedState
},
function(results,status){
var sw = results[0].geometry.viewport.getSouthWest();
var ne = results[0].geometry.viewport.getNorthEast();
var bounds = new google.maps.LatLngBounds(sw,ne);
gmap.fitBounds(bounds)
}
);
layer.setMap(gmap);
google.maps.event.addDomListener(selectedState,'change',function(){
updateMap(layer,tableId,locationColumn);
});
}
// SECTION 3: Find the address once the button is clicked
$(':button').click(
function codeAddress(){
var address = document.getElementById("address").value;
geocoder.geocode(
{
'address':address
},
function(results,status){
if(status===google.maps.GeocoderStatus.OK){
var addressSW = results[0].geometry.viewport.getSouthWest();
var addressNE = results[0].geometry.viewport.getNorthEast();
var bounds = new google.maps.LatLngBounds(addressSW,addressNE);
gmap.fitBounds(bounds);
} else {
alert("Couldn't find address for the following reason: " + status + ". Sorry about that. Please try another address.");
}
}
);
}
);
function updateMap(layer,tableId,locationColumn){
if (selectedState) {
tableId = states[selectedState];
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
where: condition
}
});
geocoder.geocode(
{
'address':selectedState
},
function(results,status){
var sw = results[0].geometry.viewport.getSouthWest();
var ne = results[0].geometry.viewport.getNorthEast();
var bounds = new google.maps.LatLngBounds(sw,ne);
gmap.fitBounds(bounds)
}
);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
});
CSS :
#map-canvas {
height: 800px;
width: 1000px;
}
HTML 코드 :
<html>
<head>
<meta charset="utf8">
<title>TESTING THE MAPS</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="public/js/script.js"></script>
</head>
</html>
편집 : HTML, CSS에 대한 링크 및 JS 파일 ---
http://speedy.sh/xRkZF/maptest.html
http://speedy.sh/zSt5p/script.js
http://speedy.sh/uCPxZ/style.css
게시 한 코드에 어떤 문제가 있습니까? – geocodezip
드롭 다운을 통해 상태를 변경할 때 드롭 다운에 상태의 퓨전 테이블지도를로드하는지도를 원합니다. 지금 당장은 그렇게하지 않습니다. – user1626730
그것은 무엇을합니까? 오류가 있습니까? – geocodezip