1

我在 Javascript 方面没有那么有经验，而且我有点卡住 ammap ( http://www.amcharts.com/javascript-maps/ )。

这个想法是从 mysql 数据库向地图添加一些位置。他们的教程章节已经过时，建议使用 DataLoader 插件（http://www.amcharts.com/tutorials/using-data-loader-plugin/）。但是，这适用于 amcharts 而不是 ammap，我无法弄清楚。

这是代码：

索引.php

<script src="ammap/ammap.js" type="text/javascript"></script>
<link rel="stylesheet" href="ammap/ammap.css" type="text/css"
media="all" />
<script src="ammap/maps/js/germanyLow.js" type="text/javascript"></script>
<script
src="http://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"
type="text/javascript"></script>



<script type="text/javascript">
AmCharts.makeChart( "mapdiv", {
      "type": "map",
      "dataProvider": {
          "map": "germanyLow"
      }
      "dataLoader": {
        "url": "data.php",
        "format": "json",
        "showErrors": true
      },
    } );
</script>


<div id="mapdiv" style="width: 600px; height: 400px;"></div>

数据.php

<?php
$server = "localhost";
$user = "root";
$pass = "";
$db = "map";

$conn = new mysqli ( $server, $user, $pass, $db);

if ($conn->connect_error) {
    die ( "Connection failed: " . $conn->connect_error );
}

$sql = "SELECT latitude, longitude FROM map";

$result = $conn->query($sql);

if($result->num_rows > 0){
    $data = array();
    while($row = $result->fetch_assoc()){
        $data[] = $row;
    }
}else{
    //
}
$string = json_encode($data);
echo $string;
?>

data.php 文件的 json 字符串为：

[{"纬度":"48.47","经度":"9.11"},{"纬度":"53.33","经度":"10"}]

地图不会使用此代码加载。如果我注释掉 dataLoader 部分，地图本身就会加载得很好。有人知道如何正确使用 dataLoader 吗？任何帮助将不胜感激。

4

1 回答 1

1

在 amcharts 支持人员的帮助下解决。对于那些对解决方案感兴趣的人：

AmCharts.makeChart("mapdiv", {
  "type": "map",
  "data": {
    "map": "germanyLow"
  },
  "dataLoader": {
    "url": "data.php",
    "format": "json",
    "showErrors": true,
    "postProcess": function(data, config, map) {
      // create a new dataProvider
      var mapData = map.data;

      // init images array
      if (mapData.images === undefined)
        mapData.images = [];

      // create images out of loaded data
      for(var i = 0; i < data.length; i++) {
        var image = data[i];
        image.type = "circle";
        mapData.images.push(image);
      }
      return mapData;
    }
  }
 });
于 2015-07-30T11:20:56.987 回答