我对php和mysql还不熟悉,所以这个任务让我很费劲:我有一个mysql数据库,里面有很多地理坐标,需要用php提取出来,转换成json格式传递给javascript,然后显示在传单的热图上。
我已经编写了js代码,ajax似乎可以正常工作了。但热图似乎不接受我的包含坐标的数组。我看不出我在哪里犯了错;我认为我的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
)
//等等
@你是那个意思吗?
1条答案
按热度按时间6jjcrrmo1#
我在你的代码里看到的第一件事就是
print_r($row);
-删除或注解。还可以看看我的php连接器如何创建geojson(示例与postgres连接,但您可以简单地将其重写为mysql并根据您的数据库结构进行调整):
编辑
因为您希望获得json的特定结构,而不是具有特性的geojson,所以上述代码可以简化为: