0
나는 내 코드에 어떤 문제가 있는지 알지만, 해결 방법을 확실히 모르겠습니다.Google 퓨전 맵 - Google 퓨전 테이블에서 질문하는 동적 메뉴
나는 라디오 버튼이있는 메뉴를 생성하기 위해 쿼리하는 구글 퓨전 테이블을 가지고있다. Google지도처럼 시각화 된 Google 융합 표 인지도도 페이지에 있습니다.
몇 개의 라디오 버튼을 하드 코딩하고 클릭하면 요소의 ID를 기반으로지도에 항목이 켜집니다. google.maps.event.addDomListener를 사용하여이 마법 작업을 수행합니다. 그렇게 잘 작동합니다.
이제 한 단계 더 나아가 실제로 Google 퓨전 테이블에서 데이터를 가져 와서 테이블에있는 항목의 최신 목록을 보여줍니다. 그래서 jsonp에서 피드를 얻으려면 jQuery와 $ .get 명령을 사용하고 있습니다. 데이터의 2 열을 출력하고 innerHTML 선으로 연결하여 라디오 버튼을 동적으로 작성합니다 - div에 연결합니다.
그래서 문제는 DOM과 관련이 있다고 생각하지만 라디오 버튼을 먼저로드 한 다음지도에로드하는 방법을 모르므로 모든지도 이벤트에 사용할 수 있습니다. 라디오는 실제로 뭔가를합니다.
내 수정 된 라디오 버튼이 내 Google 퓨전 맵과 함께 작동하도록 수정해야하는 점은 무엇입니까?
function initialize() {
var table = ########;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(30.6, -108.1),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer();
filterMap(layer, table, map);
getData(table);
google.maps.event.addDomListener(document.getElementById('num1'),
'click', function() {
filterMap(layer, table, map);
});
google.maps.event.addDomListener(document.getElementById('num2'),
'click', function() {
filterMap(layer, table, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, table, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: "State",
from: table,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var bugs = document.getElementsByName('bug');
for (var i = 0, bug; bug = bugs[i]; i++) {
if (bug.checked) {
var BugName = bug.value.replace(/'/g, '\\\'');
filter.push("'" + BugName + "'");
}
}
var where = '';
if (filter.length) {
where = "'BugName' IN (" + filter.join(',') + ')';
}
return where;
}
// build the menu
function getData(table) {
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?'; // ? could be a function name
// write your SQL as normal, then encode it
var query = "SELECT BugName, bugAbbr FROM " + table + " LIMIT 1";
var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);
var jqxhr = $.get(queryurl, dataHandler, "jsonp");
}
function dataHandler(d) {
// get the actual data out of the JSON object
var data = d.table.rows;
var ftdata = ['<div>'];
for (var i = 0; i < data.length; i++) {
ftdata.push('<input type="radio" id="'+data[i][1]+'" value="'+data[i][0]+'" name="bug">'+data[i][0]+'');
}
ftdata.push('</div>');
document.getElementById('ft-data').innerHTML = ftdata.join('');
}
google.maps.event.addDomListener(window, 'load', getData);
google.maps.event.addDomListener(window, 'load', initialize);
멋진, 고마워! – Robbiegod