【发布时间】:2018-01-13 11:01:09
【问题描述】:
我是 PHP 和 MySQL 的新手,所以这个任务真的让我很苦恼: 我有一个 MySQL 数据库,其中包含许多地理坐标,这些地理坐标应由 php 提取,转换为 JSON 格式以将它们传递给 JavaScript,然后显示在 Leaflet 的热图中。
我已经编写了 JS 代码,并且 AJAX 似乎正在运行。但 Heatmap 似乎不接受我的包含坐标的数组。我看不出我在哪里犯了错误;我认为我的 PHP 数组的格式不正确。
热图需要以这种格式获取其数据:
var testData = {
max: 8,
data: [{lat: 24.6408, lng:46.7728, count: 1},{lat: 50.75, lng:-1.55, count: 1}, ...]
};
这是我现在的代码:
var geoData;
function loadData() {
alert("loading Data");
getJSON();
}
function getJSON() {
$.ajax({
url: "assets/php/readGeoData.php",
type: "GET",
datatype: "json",
success: function(data) {
alert("ajax transfer successful ");
geoData = data;
//For debugging:
alert(getGeoData());
}
})
}
function getGeoData() {
return geoData;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<!-- Leaflet Heatmap JS -->
<script src="assets/js/Leaflet.heat-gh-pages/dist/leaflet-heat.js"></script>
<!-- map CSS -->
<link rel="stylesheet" href="assets/css/map.css" />
<!-- map JS -->
<script src="assets/js/mymap.js"></script>
<!-- main CSS -->
<link rel="stylesheet" href="assets/css/main.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- data JS -->
<script src="assets/js/loadGeoData.js"></script>
</head>
<body>
<h1>movementprofile</h1>
<button id="importButton">import geoData</button>
<div id="mapid"></div>
<script>
$("#importButton").click(function() {
loadData();
});
</script>
<!-- creating the map -->
<script>
var mymap = L.map('mapid').setView([51.25, 10.5], 6);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxToken, {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
</script>
<script>
var heatmapData = {
max: 8,
data: getGeoData()
};
var heatmapLayer = new HeatmapOverlay(cfg);
heatmapLayer.setData(8, getGeoData());
</script>
</body>
</html>
PHP:
<?php
$db = new PDO('mysql:host=127.0.0.1;dbname=movementprofile;', 'root', *****);
$query ='SELECT longitude, latitude FROM movementprofile WHERE longitude IS NOT NULL AND latitude IS NOT NULL';
foreach ($db->query($query) as $row) {
print_r($row);
$longitude = $row['longitude'];
$latitude = $row['latitude'];
$singleDataset = array('lon' => $longitude,'lat' => $latitude, 'count'=> 1);
array_push($datasets,$singleDataset, JSON_FORCE_OBJECT);
echo json_encode($datasets);
}
这是我现在得到的数组(在 JS 警告框中):
Array
(
[longitude] => 13.39611111
[0] => 13.39611111
[latitude] => 52.52944444
[1] => 52.52944444
)
nullArray
(
[longitude] => 13.37472222
[0] => 13.37472222
[latitude] => 52.53027778
[1] => 52.53027778
)
nullArray
(
[longitude] => 13.38361111
[0] => 13.38361111
[latitude] => 52.53
[1] => 52.53
)
//... and so on, there are more than 30.000 entries
那么,如何让这个数组看起来像热图需要的那样?
编辑:
所以我将我的 PHP 编辑为:
foreach ($db->query($query) as $row) {
print_r($row);
$longitude = $row['longitude'];
$latitude = $row['latitude'];
$singleDataset = array('lon' => $longitude,'lat' => $latitude, 'count'=> 1);
array_push($datasets,json_encode($singleDataset));
但还是得到了这个数组:
Array
(
[longitude] => 13.39611111
[0] => 13.39611111
[latitude] => 52.52944444
[1] => 52.52944444
)
//等等
@瘦士兵 你是这个意思吗?
【问题讨论】:
-
您声称在 alert() 框中获得的文本似乎是 php,而不是 json。您确定您的 echo json_encode 行正在运行吗?看来您正在某处运行 var_dump 或 print_r ,有时它显示 null 有时它显示一个数组。
-
我不认为你的 echo json_encode($datasets);如果 js 库需要一个包含数组和其他属性的对象,则该行应该在 foreach 循环中。
-
可能就是这样!所以我必须对每个“小”数组进行编码,而不仅仅是对大数组进行编码?
-
你在做
foreach ($db->query($query) as $row) { print_r($row);- 这就是你看到数组的原因。下面你看到一些看起来像 json 的东西吗?如果不是,请从我的回答中分析代码
标签: javascript php mysql leaflet heatmap