在此自定義地圖上的哪里添加天氣圖層？

Question

我需要一些幫助來確定將天氣圖層代碼放置到自定義Google Map（API v3）的位置，非常感謝您的任何輸入:)

我們創建了一個自定義Google Map，並在其上有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>

Answer 1

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

var styledMapType = new google.maps.StyledMapType({

在此自定義地圖上的哪里添加天氣圖層？

問題描述

1 個解決方案

解決方案1
0 已采納 2013-04-23 07:17:37

在此自定義地圖上的哪里添加天氣圖層？

問題描述

1 個解決方案

解決方案1 0 已采納 2013-04-23 07:17:37

解決方案1
0 已采納 2013-04-23 07:17:37