Question

我在Javascript方面没有经验，而且我很喜欢使用ammap（http://www.amcharts.com/javascript-maps/）。

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

以下是代码：

的index.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>

data.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吗？任何帮助将不胜感激。

Answer 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;
    }
  }
 });

使用mysql填充ammap

1 个答案: