OPTIONS和STYLES是否可用於Google Maps中的FusionTableLayer？

Question

當將Google Fusion表格中的地圖數據作爲圖層顯示在Google地圖上時，可以使用非常豐富的選項來自定義地圖要素的外觀和信息窗口的內容。您似乎可以使用您在運行時生成的樣式/信息窗口（即通過客戶端上的代碼），也可以使用您在Fusion Tables工具中創建的樣式/信息窗口，但不能同時使用這兩個窗口。對於您要爲給定的地圖視圖嘗試自定義的同一類行爲，這是有意義的，因爲否則會出現兩個相同的行爲的競爭命令。但是，我想知道是否可以混合匹配它，以便在客戶端（使用樣式部分/指令）上動態生成樣式，但使用使用Fusion Tables工具設置的「默認」信息窗口。

以下示例代碼說明了我最想做的事情。請注意選項和樣式塊的存在。使用默認信息窗口的選項。和樣式來定製地圖功能的外觀。

layer = new google.maps.FusionTablesLayer({ 
    ... 
    }, 
    options: { 
    //styleID is removed from Options; using Styles below--styleId: 2, 
    templateId: 2 //Info Window is left to be the default one. 
    } 

    //Styles section is used instead of default styleID in "options" above. 
    styles: [{ 
     where: "filter condition", 
     polylineOptions: { 
      strokeColor: "#ffbf00", 
      strokeWeight: "3" 
     } 
    }] 
}); 

Answer 1

是的，你可以。點擊事件中提供了風格化的infowindow內容。

參見the documentation：

FusionTablesMouseEvent對象規範

在FusionTablesLayer會鼠標事件的屬性。

 
infoWindowHtml | Type: string | Pre-rendered HTML content, as placed in the infowindow by the default UI. 

example fiddle從your previous question: 「WHERE」 clauses being ignored in Fusion Table Layer in Google Maps

代碼片段：

var geocoder = new google.maps.Geocoder(); 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    layer = new google.maps.FusionTablesLayer({ 
 
    map: map, 
 
    options: { 
 
     // styleId: 2, 
 
     templateId: 2 
 
    }, 
 
    heatmap: { 
 
     enabled: false 
 
    }, 
 
    query: { 
 
     select: "geometry", 
 
     from: "1D6d93-0iT2zUCw8IvkbpDPYDx2-jA0ZAWXi07mQD", 
 
    }, 
 
    styles: [{ 
 
     polylineOptions: { 
 
     strokeOpacity: 0.001, 
 
     strokeWeight: 0 
 
     } 
 
    }, { 
 
     where: "SHIFT_ID = 3", 
 
     polylineOptions: { 
 
     strokeOpacity: 1.0, 
 
     strokeColor: "#FFFFFF", 
 
     strokeWeight: 3 
 
     } 
 
    }, { 
 
     where: "SHIFT_ID = 1", 
 
     polylineOptions: { 
 
     strokeOpacity: 1.0, 
 
     strokeColor: "#FF0000", 
 
     strokeWeight: 3 
 
     } 
 
    }, { 
 
     where: "SHIFT_ID = 2", 
 
     polylineOptions: { 
 
     strokeOpacity: 1.0, 
 
     strokeColor: "#ffbf00", 
 
     strokeWeight: "3" 
 
     } 
 
    }] 
 
    }); 
 
    geocoder.geocode({ 
 
    'address': "Winnipeg, Canada" 
 
    }, function(results, status) { 
 
    if (status === google.maps.GeocoderStatus.OK) { 
 
     map.fitBounds(results[0].geometry.viewport); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>