У меня есть веб-сервис, который запрашивает базу данных и возвращает данные JSON. У меня также есть HTML-страница с AJAX и картой Leaflet. Я должен сделать маркеры отображения карты на основе JSON, который возвращается из веб-службы.
Я не могу понять, что я делаю неправильно, я следил за примечаниями к классу. Я думаю, что проблема в том, что запрос не отправляется. Вот мой код
HTML
<!DOCTYPE html>
<html>
<head>
<title>Points of Interest</title>
<link rel="stylesheet" type="text/css" href="custom.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="skeleton.css">
<link rel='stylesheet' type='text/css' href='/wad/leaflet/leaflet.css' />
<script type="text/javascript" src="map.js"></script>
<script type='text/javascript' src='/wad/leaflet/leaflet.js'></script>
</head>
<body onload='init()'>
<img src="heroxd.jpg" alt="">
<div class="container">
<div class="twelve-columns">
<h1>Welcome to Points of Interest!</h1>
<p>Linking users to interesting areas for 25 years</p>
<p>Enter a region below to search for POIs!</p>
<input type="text" id="region" class="margin-top-30" placeholder="Enter Region" name="region" />
<input type="submit" id="submit" />
</div>
<div id="jsonload">
</div>
<div id="map1" style="width:800px; height:600px">
<div id="info"></div>
</div>
</body>
</html>
JS
var map;
var attrib;
function init()
{
document.getElementById("submit").addEventListener("click", poiMarkers);
map = L.map ("map1");
attrib="Map data copyright OpenStreetMap contributors, Open Database Licence";
L.tileLayer
("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{ attribution: attrib } ).addTo(map);
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (processPosition, handleError,
{enableHighAccuracy:true, maximumAge: 5000 }
);
}
else
{
alert("Sorry, geolocation not supported in this browser");
}
function processPosition(gpspos)
{
var info = 'Lat: ' + gpspos.coords.latitude + ' lon: ' + gpspos.coords.longitude;
document.getElementById('info').innerHTML = info;
map.setView([gpspos.coords.latitude,gpspos.coords.longitude], 14);
}
function handleError(err)
{
alert('An error occurred: ' + err.code);
}
}
function processPosition(gpspos)
{
var info = 'Lat: ' + gpspos.coords.latitude + ' lon: ' + gpspos.coords.longitude;
document.getElementById('info').innerHTML = info;
map.setView([gpspos.coords.latitude,gpspos.coords.longitude], 14);
}
function handleError(err)
{
alert('An error occurred: ' + err.code);
}
function poiMarkers()
{
var a = document.getElementById('region').value;
var ajaxConnection = new XMLHttpRequest();
ajaxConnection.addEventListener ("load",e =>
{
var allPlaces = JSON.parse(e.target.responseText);
var lat = 0;
var lon = 0;
var poiLocation = "";
allPlaces.forEach( curplace =>
{
lat = `${curPlace.lat}`;
lon = `${curPlace.lon}`;
poiLocation = [lat, lon];
L.marker(poiLocation).addTo(map);
} );
});
// Open the connection to a given remote URL.
ajaxConnection.open("GET" , `https://****return_poi.php?region=${a}`);
// Send the request.
ajaxConnection.send();
}