谷歌天气图书馆 [英] Google weather library

问题描述

我遇到的问题是，显示的第一个窗口非常小，您必须滚动。
我如何控制这个窗口的大小？

其次，我只想显示我给出的坐标的地图，并显示给我我想要的最少时间。我该怎么做？

这是我在此处的代码：

pre $ function generartiempo（36.745，-3.87665，'mapatiempo'）{
var mapOptions = {
zoom：11，
center：new google.maps.LatLng（lat，lng，true），
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var infowindow = new google.maps.InfoWindow（）;
var map = new google.maps.Map（document.getElementById（'mapatiempo'），
mapOptions）;

var weatherLayer = new google.maps.weather.WeatherLayer（{
temperatureUnits：google.maps.weather.TemperatureUnit.CELSIUS，
windSpeedUnit：google.maps.weather.WindSpeedUnit .KILOMETERS_PER_HOUR
}）;


weatherLayer.setMap（weatherLayer.getMap（）？null：map）;

var cloudLayer = new google.maps.weather.CloudLayer（）;
cloudLayer.setMap（map）;

}
< div id =mapatiempo>< / div>
#mapatiempo {
width：268px;
height：200px;
border：1px solid＃AAAAA8;
margin-bottom：5px;
margin-top：15px;
}


任何人都可以帮忙吗？
编辑示例： http://jsfiddle.net/webyseo/YW2K7/12/
解决方案？
thanks !!!!!

解决方案

没有选项可以定义默认infoWindow的大小。此外，infoWindow的大小受到地图大小的限制，因此它不能更大，因此您需要放大地图。

您可以执行的操作：用自定义的infoWindow覆盖默认的infoWindow并自行定义内容，以便它适合更小的infoWindow

---

自定义infoWindow的示例代码:(假设一个变量包含 google.maps.Map ）

  //创建weatherLayer 
 var weatherLayer = new google.maps.weather.WeatherLayer（{
 temperatureUnits：google.maps.weather.TemperatureUnit.FAHRENHEIT，
 clickable： true，
 suppressInfoWindows：true 
}）; 
 
 //创建InfoWondow实例
 var weatherWindow = new google.maps.InfoWindow（）; 
 
 //观察点击事件
 google.maps.event.addListener（weatherLayer，'click'，function（e）{
 
 //隐藏infoindow 
 weatherWindow.close（）; 
 
 var content = document.createElement（'ul'），
 weather = e.featureDetails.forecast，
 unit ='°' + e.featureDetails.temperatureUnit.toUpperCase（）; 
 
 //合并当前天气预报
 weather.push（e.featureDetails.current）; 
 
 / /创建一些内容（这里是一个简短的摘要）
 for（var i = 0; i< weather.length; ++ i）{
 var item = content.appendChild（document.createElement（'li' ））
 .appendChild（document.createTextNode（''））
w = weather [i]; 
 item.data ='['+ w.shortDay +']'+ w.description + 
'（'+ w.low + unit +'/'+ w.high + unit +'）'; 
 
 
} 
 // set cont infoWindow的实体和位置
 weatherWindow.setOptions（{position：e.latLng，content：content}）; 
 //...并打开infowindow 
 weatherWindow.open（map）; 
}）; 
 weatherLayer.setMap（map）; 
  

---

演示： http://jsfiddle.net/doktormolle/pnAyD/

I'm using Google library time showing it on the map.

The problem I have is that the first window that displays is very small and you have to scroll. How do I control the size of this window?

Second, I would like to only show the map for the coordinates that I give, and show me the least time around I want. How do I do that?

This is my code in here:

         function generartiempo(36.745,-3.87665,'mapatiempo') {
            var mapOptions = {
          zoom: 11,
          center: new google.maps.LatLng(lat,lng,true),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infowindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById('mapatiempo'),
            mapOptions);

        var weatherLayer = new google.maps.weather.WeatherLayer({
          temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS,
          windSpeedUnit: google.maps.weather.WindSpeedUnit.KILOMETERS_PER_HOUR
        });


        weatherLayer.setMap(weatherLayer.getMap() ? null : map);

        var cloudLayer = new google.maps.weather.CloudLayer();
        cloudLayer.setMap(map);

    }
<div id="mapatiempo"></div>
#mapatiempo {
width: 268px;
height: 200px;
border: 1px solid #AAAAA8;
margin-bottom: 5px;
margin-top: 15px;
}

Can anyone help? edit example:http://jsfiddle.net/webyseo/YW2K7/12/ solution? thanks!!!!!

解决方案

There is no option to define the size of the default infoWindow. Furthermore the size of an infoWindow is restricted by the size of the map, it can't be larger, so you need to enlarge the map.

What you can do: override the default infoWindow with a custom infoWindow and define the content on your own, so that it fit's into a smaller infoWindow

---

Sample code for a custom infoWindow:(assuming a variable containing the google.maps.Map)

    //create the weatherLayer
    var weatherLayer = new google.maps.weather.WeatherLayer({
      temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT,
      clickable:true,
      suppressInfoWindows:true
    });

    //create InfoWondow-instance
    var weatherWindow=new google.maps.InfoWindow();

    //observe click-event
    google.maps.event.addListener(weatherLayer,'click',function(e){

      //hide infoindow
      weatherWindow.close();

      var content  = document.createElement('ul'),
          weather  = e.featureDetails.forecast,
          unit     = '°'+e.featureDetails.temperatureUnit.toUpperCase();

        //merge current weather and forecast
        weather.push(e.featureDetails.current);

        //create some content(here a short summary)
        for(var i = 0; i<weather.length; ++i){
          var item = content.appendChild(document.createElement('li'))
                      .appendChild(document.createTextNode(''))
              w    = weather[i];
              item.data='['+w.shortDay+']'+w.description+
                        '('+w.low+unit+'/'+w.high+unit+')';


        }
        //set content and position of the infoWindow
        weatherWindow.setOptions({position:e.latLng,content:content});
        //...and open the infowindow
         weatherWindow.open(map);
    });
    weatherLayer.setMap(map);

---

Demo: http://jsfiddle.net/doktormolle/pnAyD/

这篇关于谷歌天气图书馆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！