2014-01-23 2 views
-1

У меня есть две колонки в моей таблице слияния, оба сохраняют имена значков. Одна из таблиц - значки по умолчанию.Fusion Table Icon

Мне интересно, есть ли способ переключаться между двумя столбцами для изменения значков в JavaScript?

Приветствия

+0

Как вы отображая FusionTable? Вы используете FusionTablesLayer на Карте Google Maps Javascript API v3? Или просто в интерфейсе FusionTables? Если вы используете FusionTablesLayer, вы можете сделать то, что хотите, с помощью [styleId и template] (https://developers.google.com/fusiontables/docs/samples/style_and_template_ids) – geocodezip

+0

Это можно сделать: http: // www.geocodezip.com/v3_FusionTables_multipleColIconDefs.html – geocodezip

ответ

0
  1. установить две карты в FusionTables UI с соответствующих столбцов определения значков (Fusion Tables Help article describing how to do that)
  2. «опубликовать» карте, получать HTML и Javascript, который будет содержать значения, которые используются для styleId и шаблона для каждой конфигурации.
  3. .setOptions вызова на FusionTablesLayer переключаться между ними
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport"></meta> 
<title>Astraptes fulgerator- demo data - Google Fusion Tables</title> 
<style type="text/css"> 
html, body, #googft-mapCanvas { 
    height: 300px; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
} 
</style> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
    function initialize() { 
    google.maps.visualRefresh = true; 
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || 
     (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
    if (isMobile) { 
     var viewport = document.querySelector("meta[name=viewport]"); 
     viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); 
    } 
    var mapDiv = document.getElementById('googft-mapCanvas'); 
    mapDiv.style.width = isMobile ? '100%' : '500px'; 
    mapDiv.style.height = isMobile ? '100%' : '300px'; 
    var map = new google.maps.Map(mapDiv, { 
     center: new google.maps.LatLng(10.902224578468406, -85.43183000000005), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 

    layer = new google.maps.FusionTablesLayer({ 
     map: map, 
     heatmap: { enabled: false }, 
     query: { 
     select: "col12", 
     from: "1_DWHpdjPNGQwVZU5OLbMMS-6yrbIY4wTGJoRMLg", 
     where: "" 
     }, 
     options: { 
     styleId: 3, 
     templateId: 3 
     } 
    }); 
    if (isMobile) { 
     var legend = document.getElementById('googft-legend'); 
     var legendOpenButton = document.getElementById('googft-legend-open'); 
     var legendCloseButton = document.getElementById('googft-legend-close'); 
     legend.style.display = 'none'; 
     legendOpenButton.style.display = 'block'; 
     legendCloseButton.style.display = 'block'; 
     legendOpenButton.onclick = function() { 
     legend.style.display = 'block'; 
     legendOpenButton.style.display = 'none'; 
     } 
     legendCloseButton.onclick = function() { 
     legend.style.display = 'none'; 
     legendOpenButton.style.display = 'block'; 
     } 
    } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 

<body> 
    <input type="button" value="change A" onclick="layer.setOptions({styleId:2, template:2});"></input> 
    <input type="button" value="change B" onclick="layer.setOptions({styleId:3, template:3});"></input> 
    <div id="googft-mapCanvas"></div> 
</body> 
</html>