2

我正在调用 openweathermap 的 web 服务，它在地图上显示天气预报。

我正在解析其他标签，如天气、温度、风和所有。但是当我解析标签图标时，我在这个坐标上得到了错误：[weatherItem.coord.lon, weatherItem.coord.lat].

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather layer</title>
    <style>
        html, body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        }
        #map-canvas {
        width: 100%;
        height: 100%;
        }
        .gm-style-iw {
        text-align: center;
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
    </script>
    <script>
  var map;
  var geoJSON;
  var request;
  var gettingData = false;
  var openWeatherMapKey = "57ba5be1b9a9d991f65909ee19523cc5"
  function initialize() {

    var mapOptions = {
      zoom: 4,
      center: new google.maps.LatLng(50,-50)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    // Add interaction listeners to make weather requests
    google.maps.event.addListener(map, 'idle', checkIfDataRequested);
    // Sets up and populates the info window with details
    map.data.addListener('click', function(event) {
      infowindow.setContent(
       "<img src=" + event.feature.getProperty("icon") + ">"
       + "<br /><strong>" + event.feature.getProperty("city") + "</strong>"
       + "<br />" + event.feature.getProperty("temperature") + "&deg;C"
       + "<br />" + event.feature.getProperty("weather")
       );
      infowindow.setOptions({
          position:{
            lat: event.latLng.lat(),
            lng: event.latLng.lng()
          },
          pixelOffset: {
            width: 0,
            height: -15
          }
        });
      infowindow.open(map);
    });
  }
  var checkIfDataRequested = function() {

    // Stop extra requests being sent
    while (gettingData === true) {
      request.abort();
      gettingData = false;
    }
    getCoords();
  };
  // Get the coordinates from the Map bounds
  var getCoords = function() {
    var bounds = map.getBounds();
    var NE = bounds.getNorthEast();
    var SW = bounds.getSouthWest();
    getWeather(NE.lat(), NE.lng(), SW.lat(), SW.lng());
  };
  // Make the weather request
  var getWeather = function(northLat, eastLng, southLat, westLng) {

    gettingData = true;
    //this below is openweathermapwebaservice  which display forecast weather.
    var requestString = "http://api.openweathermap.org/data/2.5/forecast?lat=&lon="
                        + westLng + "," + northLat + "," //left top
                        + eastLng + "," + southLat + "," //right bottom
                        + map.getZoom()
                        + "&cluster=yes&format=json"
                        + "&APPID=" + openWeatherMapKey;
    request = new XMLHttpRequest();
    request.onload = proccessResults;
    request.open("get", requestString, true);
    request.send();
  };
  // Take the JSON results and proccess them
  var proccessResults = function() {
    console.log(this);
    var results = JSON.parse(this.responseText);
    if (results.list.length > 0) {
        resetData();
        for (var i = 0; i < results.list.length; i++) {
          geoJSON.features.push(jsonToGeoJson(results.list[i]));
        }
        drawIcons(geoJSON);
    }
  };

  var infowindow = new google.maps.InfoWindow();
  // For each result that comes back, convert the data to geoJSON
  var jsonToGeoJson = function (weatherItem) {
    alert(jsonToGeoJson);
    var feature = {
      type: "Feature",

      properties: {
        city: weatherItem.name,
        weather: weatherItem.weather[0].main,
        temperature: weatherItem.main.temp,
        min: weatherItem.main.temp_min,
        max: weatherItem.main.temp_max,
        humidity: weatherItem.main.humidity,
        pressure: weatherItem.main.pressure,
        windSpeed: weatherItem.wind.speed,
        windDegrees: weatherItem.wind.deg,
        windGust: weatherItem.wind.gust,

       icon: "http://openweathermap.org/img/w/"
              + weatherItem.weather[0].icon  + ".png",
        coordinates: [weatherItem.coord.lon, weatherItem.coord.lat]
      },
      geometry: {
        type: "Point",
        coordinates: [weatherItem.coord.lon, weatherItem.coord.lat]
      }

    };

    // Set the custom marker icon
    map.data.setStyle(function(feature) {
      return {
        icon: {
          url: feature.getProperty('icon'),
          anchor: new google.maps.Point(25, 25)
        }
      };
    });
    // returns object
    return feature;
  };
  // Add the markers to the map
  var drawIcons = function (weather) {
     map.data.addGeoJson(geoJSON);
     // Set the flag to finished
     gettingData = false;
  };
  // Clear data layer and geoJSON
  var resetData = function () {
    geoJSON = {
      type: "FeatureCollection",
      features: []
    };
    map.data.forEach(function(feature) {
      map.data.remove(feature);
    });
  };
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>

<div id="map-canvas"></div>

</body>
</html>

在此处输入图像描述

4

1 回答 1

1

如果您查看JSON天气 api 服务的响应，您将看到coorddata is out of listdata，类似于所有数据 in 的标头数据相同list。

因此，在调用jsonToGeoJson函数时，将其传递results.city.coord给results.list[i]参数：

geoJSON.features.push(jsonToGeoJson(results.list[i], results.city.coord));

更改jsonToGeoJson签名以接受更多参数：

var jsonToGeoJson = function (weatherItem, coord) {

在jsonToGeoJson函数内部，像这样访问坐标：

coordinates: [coord.lon, coord.lat]
于 2015-07-14T10:48:39.787 回答