Question

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

Answer 1

将其放置在初始化地图的位置，例如在那之前：

var styledMapType = new google.maps.StyledMapType({

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

1 个答案: