Google 퓨전 맵 자바 스크립트 드롭 다운 메뉴가 작동하지 않습니다.

사용자가 Google 퓨전 테이블 오버레이를 사용하여 다른지도보기로 변경할 수있는 자바 스크립트 메뉴를 구현했습니다. 불행히도 내 드롭 다운 메뉴는 개별적으로 또는 함께 작동하지 않습니다. 예를 들어 누군가 "중동 지역"에서만 포트를 보거나 "인도 아대륙"지역 및 "ICD"유형의 포트를보고 싶어합니다.Google 퓨전 맵 자바 스크립트 드롭 다운 메뉴가 작동하지 않습니다.

두 번째 문제는 퓨전 테이블에서 확인 된 바와 같이 표시되지 않는 마커 인 것 같습니다. 그들은 포트의 "유형"에 대해 "배송"및 "ICD"에 대해 다른 색상을 사용합니다.

이 내 작품은 지금까지입니다 :

여기

<!DOCTYPE> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Fusion Map</title> 

    <style> 
     body {margin:0 auto; width:960px;} 
     #map_div {height:550px; width:100%; margin-top:50px;} 
    </style> 

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script> 
     var tableid = 1102368; 
     var layer = new google.maps.FusionTablesLayer(1102368); 

     function initialize() { 
     var ports = new google.maps.LatLng(35.173808, 37.236325); 
     var myOptions = { 
      center: ports, 
      zoom: 3, 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById('map_div'), 
      myOptions); 
       layer.setMap(map); 
     } 

     function refreshFusion() { 
      var qry = "SELECT PortName, 'Region' FROM " + tableid; 
      var region = document.getElementById('ddRegion').value; 
      var type = document.getElementById('ddType').value; 
      var filters = []; 
      if(type != '') { 
       filters.push("'Type' CONTAINS '" + type + "'"); 
      } 
      if(type != '') { 
       filters.push("'Region' CONTAINS '" + region + "'"); 
      } 
      if(filters.lenght > 0) { 
       qry += " WHERE " + filters.join(" AND "); 
      } 
      layer.setQuery(qry); 
     } 
    </script> 

</head> 

<body onload="initialize();"> 
    <div id="map_div"></div> 

    <div> 
     <h3>Region</h3> 
     <select id="ddRegion" style="width: 150px;" onchange="refreshFusion();"> 
      <option value="">All</option> 
      <option value="Middle East">Middle East</option> 
      <option value="Red Sea">Red Sea</option> 
      <option value="East Mediterranean">East Mediterranean</option> 
      <option value="West Mediterranean">West Mediterranean</option> 
      <option value="Adriatic">Adriatic</option> 
      <option value="Black Sea">Black Sea</option> 
      <option value="North Africa">North Africa</option> 
      <option value="Indian Sub-Continent">Indian Sub-Continent</option> 
     </select> 
     <h3>Type</h3> 
     <select id="ddType" style="width: 150px;" onchange="refreshFusion();"> 
      <option value="">All</option> 
      <option value="Shipping">Shipping</option> 
      <option value="ICD">ICD</option> 
     </select> 
    </div> 
</body> 
</html>

는 퓨전 테이블 : Link 여기

라이브 코드입니다 : Link

일체의 도움이 크게 감사합니다!

출처

2012-01-19 Sags

또한 다음에 쿼리의 SELECT 절을 변경하기를 원할 것입니다 :

"SELECT PortName FROM " + tableid;

에만 위치 열이 퓨전 테이블 계층 쿼리의 SELECT 절에 있어야하기 때문이다.

일반적으로 새로운 Fusion Tables Layer 구문도 사용하는 것이 좋습니다. 예는 여기에서 볼 수있다 :

http://code.google.com/apis/fusiontables/docs/samples/change_query.html

출처

2012-01-20 01:52:03

참고를위한 감사합니다! 그것은 많은 도움이되었습니다. – Sags

라인 37, 당신은 타입을 말합니다! = '', 나는 당신이 지역 테스트를 의미한다고 생각합니다! = '모두'여기. Line 40 필터가 있습니다. 필터가 있어야합니다. 길이가

Firebug 또는 Chrome 개발자 도구를 사용하면 코드를 살펴보고 어떤 값이 설정되어 있는지 쉽게 확인할 수 있습니다.

출처

2012-01-19 23:19:50

감사 오타를 지적. 나는 Firebug에 자신을 소개해 왔지만 그것을 최대한 활용할 수는 없었다. 이것도 문제를 해결하는 데 도움이되었습니다. 정말 고맙습니다! – Sags

Google 퓨전 맵 자바 스크립트 드롭 다운 메뉴가 작동하지 않습니다.

답변

관련 문제