Mysql + PHP + 谷歌地图API答案

【问题标题】：Mysql + PHP + Google Maps ApiMysql + PHP + 谷歌地图API
【发布时间】：2016-02-24 04:51:57
【问题描述】：

我有一个包含正方形坐标记录的数据库。

使用 google maps api 我想使用数据库中的记录来绘制多边形。

我有一些 PHP 经验，我想我可以使用 PHP 将数据库数据传递给 JavaScript。

我假设这可以通过 XML 完成，如果可以，我会编写 PHP 来访问数据库并将数据加载到内存中

PHP

require_once 'login.php';
$connection = new mysqli($db_hostname, $db_username, $db_password, $db_database);
if ($connection->connect_error) die ($connection->connect_error);

$query = "SELECT * FROM BC_BBA_SquaresCoordinates";
$result = $connection->query($query); 
if (!$result) die ($connection->error);

$rows = $result->num_rows;

for($j=0;$j<$rows;++$j){
    $result->data_seek($j);
    $row = $result->fetch_array(MYSQLI_ASSOC);
}
$result->close(); 
$connection->close();

downloadUrl("test1.php", function(data){
    var xml = data.responseXML;
    var row = xml.documentElement.getElementsByTagName("row");
    for (var i = 0; i < row.length; i++){
      var squarenum = row[i].getAttribute("SQUARE_ID");
    }
});

我对 XML 不太熟悉，所以我可能没有正确编码 PHP。对此的任何帮助将不胜感激。

【问题讨论】：

你会更好，我认为使用 JSON 而不是 XML 将数据从 PHP 传递到 JS。
使用 JSON 是一个更好的主意，也许通过 AJAX 调用？取决于您需要如何/何时检索该数据...请参阅json_encode，它可能会有所帮助！

标签： php mysql google-maps-api-3

【解决方案1】：

谢谢你，

我能够使用

在谷歌地图上绘制 ~11000 个多边形

var SquareCoords = [ {lat: parseFloat(markers[i].getAttribute("latone")), lng: parseFloat(markers[i].getAttribute("lngone"))}, {lat: parseFloat(markers[i].getAttribute("lattwo")), lng: parseFloat(markers[i].getAttribute("lngtwo"))}, {lat: parseFloat(markers[i].getAttribute("latone")), lng: parseFloat(markers[i].getAttribute("lngone"))}, {lat: parseFloat(markers[i].getAttribute("lattwo")), lng: parseFloat(markers[i].getAttribute("lngtwo"))}, {lat: parseFloat(markers[i].getAttribute("latthree")), lng: parseFloat(markers[i].getAttribute("lngthree"))}, {lat: parseFloat(markers[i].getAttribute("latthree")), lng: parseFloat(markers[i].getAttribute("lngthree"))},
{lat: parseFloat(markers[i].getAttribute("latfour")), lng: parseFloat(markers[i].getAttribute("lngfour"))}, {lat: parseFloat(markers[i].getAttribute("latfour")), lng: parseFloat(markers[i].getAttribute("lngfour"))},

        ];

        // Construct the polygon.
        var drawSquare = new google.maps.Polygon({
            paths: squareCoords,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: '#FF0000',
            fillOpacity: 0.35
        });

【讨论】：

【解决方案2】：

我最近使用 XML 实现了这个解决方案的一部分。我没有画任何多边形（并且有兴趣看看你是怎么做的！），但我一直在用存储在 MySQL 数据库中的大量点填充地图。我想我可以帮助您处理 XML。我希望我能指出我找到的来源，而不仅仅是总结它们/分享我的解决方案，但我无法快速找到它们。

在 PHP 中，一些聪明的人提供了 parseToXML 代码somewhere, maybe here，它处理转义字符。我使用迭代解决方案来生成 XML。在开始迭代并关闭开始标签（我使用<markers>）之前，不要忘记指定它是像上面的echo "<?xml version='1.0' ?>"; 或header("Content-type: text/xml"); 一样的XML。我希望这会有所帮助。

PHP：

function parseToXML($htmlStr)
    {
        $xmlStr=str_replace('<','&lt;',$htmlStr);
        $xmlStr=str_replace('>','&gt;',$xmlStr);
        $xmlStr=str_replace('"','&quot;',$xmlStr);
        $xmlStr=str_replace("'",'&#39;',$xmlStr);
        $xmlStr=str_replace("&",'&amp;',$xmlStr);
        return $xmlStr;
    }
$mapquery = "select PropertyID, Latitude, Longitude, from map";
$mapresult = mysqli_query($dbConn,$mapquery);
if (!$mapresult) {
    echo('Query Error');
    quit();
}

header("Content-type: text/xml");

echo '<markers>';

if ($mapresult->num_rows > 0) {
        while ($row = $mapresult->fetch_assoc()){
            echo '<marker ';
            echo 'propId="' . parseToXML($row['PropertyID']) . '" ';
            echo 'lat="' . $row['Latitude'] . '" ';
            echo 'lng="' . $row['Longitude'] . '" ';
            echo '/>';
        }
    }
echo '</markers>';

  downloadUrl("map.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var propId = markers[i].getAttribute("propId");
                var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
   var marker = new google.maps.Marker({
            map: map,
            position: point
          });
        }
      });

【讨论】：