2
Я звоню в веб-сервис openweathermap, отображающий прогноз погоды на карте.ТипError: weatherItem.coord не определено: координаты: [weatherItem.coord.lon, weatherItem.coord.lat]
Я разбор другого тега, как погода, температура, ветер и all.but когда я разобрать значок тегов я получил ошибку на этой координате: [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") + "°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>
Привет! Можете ли вы подробно остановиться на своей конкретной проблеме и сократить свой код до [MCVE] (/ help/mcve)? – Qix
ok.i хочет отображать прогноз погоды на карте. Когда пользователь нажимает на значок выше, он отображает детали о погоде, городе, ветре и всем ..... https: //github.com/google/maps-for-work- образцы/blob/master/samples/OpenWeatherMapLayer/index.html – ankita
его ссылка отображает текущую погоду в severl city.on map.in place Я хочу отображать прогноз погоды в нескольких city.so, поскольку я использую вышеуказанный веб-сервис ... прогноза weather.but, все значок связывает друг друга .. я не знаю, как я могу решить эту проблему ... – ankita