融合表圖標

-1

我在我的融合表中有兩列，都存儲圖標的名稱。其中一個表是默認圖標。融合表圖標

我想知道是否有方法在兩列之間切換來更改JavaScript中的圖標？

乾杯

2014-01-23 user2850858

你是如何顯示FusionTable它們之間改變？您是否在Google Maps JavaScript API v3地圖上使用FusionTablesLayer？或者只是在FusionTables UI中？如果您使用的是FusionTablesLayer，則可以使用[styleId和模板]（https://developers.google.com/fusiontables/docs/samples/style_and_template_ids）執行您想要的操作。 – geocodezip

可以這樣做：http：// www.geocodezip.com/v3_FusionTables_multipleColIconDefs.html – geocodezip

設置了兩個地圖在FusionTables UI與相應的列定義的圖標（Fusion Tables Help article describing how to do that）
「發佈」地圖，獲取HTML和Javascript，將包含要使用的值爲每個配置的styleId和模板。在FusionTablesLayer會
呼叫.setOptions到

<!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>

來源

2014-01-24 18:36:10 geocodezip

回答

相關問題