在此自定義地圖上添加天氣圖層的位置？

我需要一些幫助來確定將天氣圖層代碼放到自定義Google地圖（API v3）的哪個位置，任何輸入都將非常感謝:)在此自定義地圖上添加天氣圖層的位置？

我們創建了一個自定義的Google地圖，我們有2個Fusion Table圖層，並帶有一個簡單的切換。從開發文檔，以及我在這裏發現了這個網站，我可以看到我需要添加這段代碼：

var weatherLayer = new google.maps.weather.WeatherLayer({ 
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 
}); 
weatherLayer.setMap(map);

，但我到哪裏把這個完全一無所知，因爲每次我試圖添加它（現在2天），代碼中斷，我在F12控制檯窗口中顯示一個空白頁面，並顯示各種錯誤。

我們需要補充哪些內容，以及如何將其添加到切換中？以下是我們正在工作的內容：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script> 
    <script src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    var map; 

    var layer1; 
    var tableid = ''; 

    var layer2; 
    var tableid2 = 'xxxxx'; 

    var layer3; 
    var tableid3 = 'xxxxx'; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: new google.maps.LatLng(31.499, -111.202), 
     zoom: 10, 
    mapTypeControl: true, 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
     position: google.maps.ControlPosition.TOP_CENTER 
    }, 
    panControl: true, 
    panControlOptions: { 
     position: google.maps.ControlPosition.TOP_LEFT 
    }, 
    zoomControl: true, 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.LEFT_CENTER 
    }, 
    scaleControl: true, 
    scaleControlOptions: { 
     position: google.maps.ControlPosition.BOTTOM_LEFT 
    }, 
    streetViewControl: false, 
    streetViewControlOptions: { 
     position: google.maps.ControlPosition.LEFT_TOP 
    } 
    }); 

    var styledMapType = new google.maps.StyledMapType({ 
    map: map, 
    name: 'Styled Map' 
    }); 

    map.mapTypes.set('map-style', styledMapType); 
    map.setMapTypeId('map-style'); 

    layer1 = new google.maps.FusionTablesLayer({ 
    query: { 
     select: '', 
     from: tableid 
    }, 
    map: map 
    }); 

    layer2 = new google.maps.FusionTablesLayer({ 
    query: { 
     select: 'LOC', 
     from: tableid2 
    }, 
    map: map 
    }); 

    layer3 = new google.maps.FusionTablesLayer({ 
    query: { 
     select: 'geometry', 
     from: tableid3 
    }, 
suppressInfoWindows:true, 
    map: map 
    }); 
} 


function changeMap(layerNum) { 
    if (layerNum == 2) { 
    update(layer2); 
    } 
    if (layerNum == 3) { 
    update(layer3); 
    } 
} 

function update(layer) { 
    var layerMap = layer.getMap(); 
    if (layerMap) { 
    layer.setMap(null); 
    } else { 
    layer.setMap(map); 
    } 
} 

</script> 

<style type="text/css"> 
    #toggle_box { 
     position: absolute; 
     top: 7px; 
     right: 7px; 
     padding: 3px; 
     border: 1px solid #707735; 
     background: #DED9C6; 
     font-family: 'Coda', cursive; 
    } 
    body { 
     margin: 0px; 
     padding: 0px; 
     font-family: 'Coda', cursive; 
     } 
    #map_canvas { 
     position: absolute; 
     right: 0; 
     top: 0; 
     width: 100%; 
     height: 100%; 
     font-family: 'Coda', cursive; 
    } 
    </style> 
</head> 
<body onload="initialize();"> 
<div id="map_canvas"></div> 
<div id="toggle_box"><input type="checkbox" value="2" onclick="changeMap(this.value)" checked="checked" />REFERENCE POINTS 
<input type="checkbox" value="3" onclick="changeMap(this.value)" checked="checked" />AZ COUNTIES</div> 
    </body> 
    </html>

來源

2013-04-23 John Spartan

將它放置在地圖初始化的地方，例如，在該行之前：

var styledMapType = new google.maps.StyledMapType({

來源

2013-04-23 07:17:37

在此自定義地圖上添加天氣圖層的位置？

回答

相關問題