个人中心
gpt4 book ai didi

javascript - TypeError : weatherItem. 坐标未定义 : coordinates: [weatherItem. coord.lon, weatherItem.coord.lat]

转载 作者：行者123 更新时间：2023-11-30 00:26:00 29 4
gpt4 key购买 nike

我正在调用 openweathermap 的网络服务，它在 map 上显示预报天气。

我正在解析其他标签，如天气、温度、风等。但是当我解析标签图标时，我在这个坐标上得到了错误:[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>

enter image description here

最佳答案

如果你看一下JSON来自您的天气 api 服务的响应，您将看到 coord数据超出 list数据，类似于 list 中所有数据的 header 数据.

因此，在调用 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]

关于javascript - TypeError : weatherItem. 坐标未定义 : coordinates: [weatherItem. coord.lon, weatherItem.coord.lat]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31403386/

29 4 0
文章推荐： javascript - 无法使用选择计数器和 optgroups 取消选择 'select multiple' 选项
文章推荐： javascript - 在 ajaxComplete 之后加载 javascript
文章推荐： android 应用程序无限运行 onPreDraw
文章推荐： mysql - Mysql大表优化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com