Question

我一直试图将openweathermap的api数据与google map的api合并。但是，每当我尝试使用innerHTML从api中获取数据时，它会显示Uncaught TypeError: Cannot set property 'innerHTML' of null。

的Javascript

＆＃13;

var map;
var weather;
var temp;
var APPID = 'e9e239c6585f081bee7b0d7f6045a53f';

function updateByCity(q) {
  var url = "http://api.openweathermap.org/data/2.5/weather?q={" +
    q +
    "}&APPID=" + APPID;
  sendRequest(url);
}

function sendRequest(url) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var data = JSON.parse(xmlhttp.responseText);
      var weather = {};
      weather.temp = data.main.temp;

      update(weather);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}


function update(weather) {
  temp.innerHTML = weather.temp;
}

window.onload = function() {
  temp = document.getElementById("temperature");
  var weather = {};
  weather.temp = "35";

  update(weather);
}


function initMap() {
  var KL = {
    lat: 3.1390,
    lng: 101.6869
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 4.444997,
      lng: 106.554199
    }
  });

  var marker = new google.maps.Marker({
    position: KL,
    map: map
  });



  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Kuala Lumpur</h1>' +
    '<div id="bodyContent">' +
    '<p>Temperature: ' + temp + '</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

}

＆＃13;

HTML

<!doctype>
<html>

<head>
  <script src="mapJS.js"></script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuhL2_brcvjW12heXCPV8G-lXd7Kmue84&callback=initMap">
  </script>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    #map {
      height: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <div id="map"></div>
</head>

</html>

Answer 1

在您的onload功能中，您定位的是HTML ID temperature，但它不存在，我认为您要定位map

window.onload = function() {
  temp = document.getElementById("map");
  var weather = {};
  weather.temp = "35";

  update(weather);
}

Answer 2

这应解决您的null设置属性问题。主要原因是您错过了创建元素来设置温度读数。因此，我创建了一个新的<div id="temperature">，它解决了这个问题。

＆＃13;

var map;
var weather;
var temp;
var APPID = 'e9e239c6585f081bee7b0d7f6045a53f';

function updateByCity(q) {
  var url = "http://api.openweathermap.org/data/2.5/weather?q={" +
    q +
    "}&APPID=" + APPID;
  sendRequest(url);
}

function sendRequest(url) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var data = JSON.parse(xmlhttp.responseText);
      var weather = {};
      weather.temp = data.main.temp;

      update(weather);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}


function update(weather) {
  temp.innerHTML = weather.temp;
}

window.onload = function() {
  temp = document.getElementById("temperature");
  var weather = {};
  weather.temp = "35";

  update(weather);
}


function initMap() {
  var KL = {
    lat: 3.1390,
    lng: 101.6869
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 4.444997,
      lng: 106.554199
    }
  });

  var marker = new google.maps.Marker({
    position: KL,
    map: map
  });



  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Kuala Lumpur</h1>' +
    '<div id="bodyContent">' +
    '<p>Temperature: ' + temp + '</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

}


////////////////////////////////////////////////////

＆＃13;

<!doctype>
<html>

<head>
  <script src="mapJS.js"></script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuhL2_brcvjW12heXCPV8G-lXd7Kmue84&callback=initMap">
  </script>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    #map {
      height: 100%;
    }
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <br>
  <div id="temperature"></div><br>
  <div id="map"></div>
</head>

</html>

＆＃13;

使用innerHTML设置Null属性

2 个答案: