如何在 Google 地图上显示 SQL 数据库中的标记

将 SQL 数据库中的标记显示在地图上的指南

引言

本文旨在指导读者将存储在 SQL 数据库中的标记在地图上进行可视化。我们将使用 PHP 将数据库数据转换为 XML，并通过 JavaScript 文件在地图上显示这些标记。目标是将标记在地图上显示出来，并让它们可聚类。

获取标记

要在地图上显示标记，首先需要从数据库中获取数据。我们将使用 PHP 通过 mysqli 扩展连接到 MySQL 数据库，并执行一个 SELECT 查询来获取标记数据。这些数据将转换为 XML 格式，便于在地图上进行可视化。

// 执行查询并获取标记数据
$query = "SELECT * FROM tblBikeStolen WHERE 1";
$result = mysqli_query($connection, $query);
if (!$result) {
    error_log("Database query failed:" . mysqli_error($connection));
    die('Internal server error');
}

// 开始 XML 文件
echo "<?xml version='1.0' ?>";
echo '<markers>';

// 遍历结果，将数据转换为 XML
while ($row = @mysqli_fetch_assoc($result)){
  // 添加 XML 节点
  echo '<marker ';
  echo 'id="' . $row['BikeID'] . '" ';
  echo 'address="' . parseToXML($row['Address']) . '" ';
  echo 'lat="' . $row['Lat'] . '" ';
  echo 'lng="' . $row['Lng'] . '" ';
  echo 'time="' . $row['stolenTimestamp'] . '" ';
  echo '/>';
}

// 结束 XML 文件
echo '</markers>';

显示标记

接下来，我们需要在 JavaScript 中解析 XML 数据并在 Google 地图上显示标记。我们将创建一个 google.maps.Map 对象，并使用 XML 数据中的信息创建 google.maps.Marker 对象。

// 解析 XML 数据并显示标记
function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(51.8642112, -2.2380335),
        zoom: 11 
    });
    
    var infoWindow = new google.maps.InfoWindow();
    downloadUrl("./MapStolenDAO.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
            var id = markerElem.getAttribute('id');
            var address = markerElem.getAttribute('address');
            var time = markerElem.getAttribute('time');
            var point = new google.maps.LatLng(
                parseFloat(markerElem.getAttribute('lat')),
                parseFloat(markerElem.getAttribute('lng')));

            var infowincontent = document.createElement('div');
            var strong = document.createElement('strong');
            strong.textContent = address
            infowincontent.appendChild(strong);
            infowincontent.appendChild(document.createElement('br'));
            
            var time = document.createElement('timestamp');
            time.timestampContent = time
            infowincontent.appendChild(Time);
            var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
            var marker = new google.maps.Marker({
                position: point,
                label: labels[i % labels.length]
            });

            marker.addListener('click', function() {
              infoWindow.setContent(infowincontent);
              infoWindow.open(map, marker);
            });
            var markerCluster = new MarkerClusterer(map, marker,
                {imagePath: './mapImages'});
        });
    });
}

问题解决

如果标记没有在地图上显示，可能是由于以下原因：

• PHP 脚本未正确生成 XML 文件： 检查 MapStolenDAO.php 文件是否正确连接到数据库，并且是否正确解析并格式化 XML 数据。
• JavaScript 脚本无法加载 XML 文件： 确保 downloadUrl 函数可以成功从服务器获取 XML 文件。
• 地图配置错误： 检查 initMap 函数中 google.maps.Map 对象的配置，确保地图中心和缩放级别正确。

常见问题解答

• 为什么地图上的标记没有聚类？
  • 确保已创建 MarkerClusterer 对象并将其与地图和标记相关联。
• 为什么标记无法在地图上拖动？
  • 标记的 draggable 属性应设置为 true。
• 如何在地图上显示其他数据，例如自定义图标或信息窗口？
  • 可以在 google.maps.Marker 对象中自定义 icon 和 infoWindow 属性来实现此目的。
• 如何在地图上实现搜索或过滤功能？
  • 可以使用 Google 地图 API 中提供的搜索和过滤功能来实现此功能。
• 如何优化地图性能以处理大量标记？
  • 可以使用 MarkerClusterer 库或其他技术来聚类标记并提高地图性能。

结论

通过遵循本文中的步骤，可以将 SQL 数据库中的标记可视化在地图上。该解决方案使用 PHP 将数据转换为 XML，并通过 JavaScript 文件在地图上显示标记。本文还提供了问题解决技巧和常见问题解答，以帮助读者解决遇到的任何问题。