使用Google Maps JavaScript API 為圖台底層

使用Google Maps JavaScript API 為圖台底層

在本範例中，我們將示範如何將統計地圖API的輸出成果結合Google Maps API為圖台底層
來進行套疊呈現，令已有自有圖台之開發者亦可了解如何介接統計地圖API。

版型設定部分：

本進階範例的版型以CSS文件(sample.css)進行設定，其詳細說明可參考進階範例「由指定地理位置
查詢鄰近統計資料」。使用者可透過修改css檔案來更改範例版型中各個區塊的樣式設定。 

建立Google Maps API地圖：

首先在網頁初始化的程式中，我們可以先建立一個Google Maps API地圖，作為後續統計
地圖繪製成果套疊的介面。

var uluru = {lat: 25, lng: 121.5};    //宣告Google map地圖物件並設定坐標系統

                                        // The map, centered at Uluru

                   googleMap = new google.maps.Map(document.getElementById('mapView'), {zoom: 12, center: uluru});

設定統計地圖輸出格式：

本範例所繪製之統計地圖類型為面量圖，要將面量圖套疊至以Google Maps API為圖台
底層的地圖介面上可採取兩種輸出格式：純影像統計地圖或KML檔案。本範例中我們建議使用
KML檔案來進行套疊，因為在Google Maps API為圖台底層的介面中，KML檔案除了可展示
統計地圖的影像外，還可以將統計數值以訊息視窗的方式進行呈現並與使用者產生互動效果。因
此在統計地圖的參數設定中，我們要將是否輸出KML的參數設為true。

var mapOpts = {

     exportImage: true,

     pChoropleth: {

          classifyMethod: ClassifyMethod.EQUAL_INTERVAL,

          classes: 5,

          exportKML: true     //面量圖輸出KML檔案

     }

};

輸出KML檔案並套疊至Google Maps API圖台介面：

統計地圖繪製完成後，我們可以從API的回傳參數中取得.kmlUrl屬性，以得到輸出的KML檔案
連結，再透過Google Maps API提供的KML圖層套疊功能，將輸出的KML檔案直接套疊於
Google Maps API圖台介面進行展示。

statKML = new google.maps.KmlLayer({

              url: statResult.kmlUrl,

              map: googleMap

            });             //將KML套疊在Google Maps圖台