OpenWeatherMap - 地图只显示莫斯科

时间:2013-07-02 10:44:56

标签: javascript html weather-api openweathermap

我正在尝试获取一个certian城市的天气信息(城市正在动态出现),我偶然发现了这个非常容易整合的地图api。但是一旦我尝试了它,它就只显示了莫斯科,即使我给了另一个城市的纬度,也就是慕尼黑。

这是代码:

<html>
<head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js" ></script>
</head>
<body  onload="init()">
 <div id="basicMap"></div>
</body>
<script type="text/javascript">
function init() {
//Center of map
var lat = 48.24806; // <--- some dynamic location
var lon = 11.90166; //<--- some dynamic location
var lonlat = new OpenLayers.LonLat(lon, lat);
    var map = new OpenLayers.Map("basicMap");
// Create overlays
//  OSM
    var mapnik = new OpenLayers.Layer.OSM();
// Stations
var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
// Current weather
var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");
//Addind maps
map.addLayers([mapnik, stations, city]);
map.setCenter( lonlat, 10 );
 }
 </script>
 </html>

我只想为我的服务器节省一些负载能量,并在前端用js做这个天气问题。如果这样可行,那就太好了,如果可以,请帮忙。为什么我在这里坚持莫斯科,即使给出不同的拉特和大麻。这是api的链接: http://openweathermap.org/tutorial/openlayers

1 个答案:

答案 0 :(得分:1)

显然你需要设置Projection才能正常工作。

以下是伦敦代码中心的示例:

<html>
<head>
<script src="http://openweathermap.org/js/OWM.OpenLayers.1.3.4.js" ></script>
</head>
<body  onload="init()">
 <div id="basicMap"></div>
</body>
<script type="text/javascript">
function init() {
//Center of map
var lat = 51.5112139; // <--- some dynamic location
var lon = -0.1198244; //<--- some dynamic location
var map = new OpenLayers.Map("basicMap");
var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
// Create overlays
//  OSM
var mapnik = new OpenLayers.Layer.OSM();
// Stations
var stations = new OpenLayers.Layer.Vector.OWMStations("Stations");
// Current weather
var city = new OpenLayers.Layer.Vector.OWMWeather("Weather");
//Addind maps
map.addLayers([mapnik, stations, city]);
map.setCenter( position, 5 );
 }

 </script>
 </html>

要获取您所在地的经度和纬度,您可以使用以下网址: http://www.mapcoordinates.net/en

希望这有帮助