在此自定义地图上添加天气图层的位置？

我需要一些帮助来确定将天气图层代码放到自定义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

在此自定义地图上添加天气图层的位置？

回答

相关问题