使用 PHP 数据在 Google 地图上放置多个标记答案

【问题标题】：Using PHP data to place multiple markers on Google Maps使用 PHP 数据在 Google 地图上放置多个标记
【发布时间】：2019-03-16 21:14:56
【问题描述】：

我正在开发一个网页，该网页从 MySQL 数据库中获取信息，然后根据数据在地图上放置多个标记。虽然我的地图集成工作正常，但我使用 PHP 数据的代码阻止了地图的显示。但是，它没有显示任何错误。

这里是代码。我是 JavaScript 新手，但我认为问题出在具有 PHP echo 语句的函数中。我真的很感激帮助。

PHP：

$lat = [];
$long = [];
$location = [];
$id = [];
$count = 0;
$count2 = 0;
$query = "SELECT * FROM table_name Order BY id DESC";
$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_assoc($result)) {
    array_push($id, $row['id']);
    $count++;
}
for ($i = 0; $i < $count; $i++) {
    $webId = $id[$i];
    $webSearch = mysqli_query($con, "SELECT * FROM table_name WHERE id='$webId'");
    $web = mysqli_fetch_array($webSearch);
    array_push($lat, $row['lat']);
    array_push($long, $row['longi']);
    array_push($location, $row['city']);
}

JavaScript：

// Initialize and add the map
function initMap() {
    var count = <?php echo $count;?>;
    for (var i = 0; i < count; i++) {
        var marker = new google.maps.Marker({
            position: {
                lat: <?php echo $lat[$count2];?>,
                lng: <?php echo $long[$count2]; ?>
            },
            map: map,
            title: <?php echo $lat[$count2]; $count2++;?>
        });
    }
}

【问题讨论】：

您能否提供一个minimal reproducible example 来证明您的问题？（HTML、CSS、JavaScript 从页面呈现到浏览器）。
这两个sql查询的目的是什么？

标签： javascript php google-maps

【解决方案1】：

我明白为什么地图没有显示。它缺少以下地图初始化。

  var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 2,
            center: {lat: 25.363, lng: 131.044}
          });

PHP 变量名也有错误。修复之后，PHP 数据完美地传递给了 Javascript。但是，for 循环仅打印出一个标记。

【讨论】：

我认为它可能会添加所有标记，但由于使用（或误用）php 变量 $count2，它被初始化为 zero 并且从未更改过。最好使用 PHP 来生成记录集和后续的 json 对象，并将其余功能留给 javascript

【解决方案2】：

我无法理解这两个 sql 查询的目的 - 选择表格中的所有内容，然后再次从表格中选择所有内容同一张表......据我所知，一个查询就足够了。

此外，在 javascript 中使用 PHP 并期望计数器 $count2 不是初始值（如这里）或最后一个值（如果它被更改）将是一个谬误。由于 $count2 最初被赋予值 0 它保留该值，因为该变量永远不会在任何地方更改，而是在 javascript 代码中用于访问来自 PHP 变量 $lat 和 $long 的数据 - 这将始终产生相同的结果，因此在同一位置呈现单个标记 - 或多个标记。

也许考虑一种类似以下的方法，其中 php 代码运行并获取记录集并转换为 JSON 数据，以便地图代码仅使用 javascript 进行本机处理。

/*
    Fetch the results and convert to JSON for the js code... or an empty array
    if the query fails.
*/

$sql = 'select * from `table_name` order by `id` desc';
$result = $con->query( $sql );
$json = $result ? json_encode( $result->fetch_all( MYSQLI_ASSOC ) ) : json_encode( array() );




<script>
    /*
        As PHP runs before the page is rendered you can print
        the javascript variable and it will be available to 
        your map handling code - `initMap`
    */
    <?php
        echo "var json={$json};";
    ?>

    function initMap(){
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 2,
            center: {lat: 25.363, lng: 131.044}
        });

        var obj,marker;
        /*
            The json data should be accessible like this - or
            by a very similar syntax.
        */
        for( var i in json ){
            obj=json[ i ];

            marker=new google.maps.Marker({
                position: {
                    lat: obj.lat,
                    lng: obj.longi
                },
                map: map,
                title: obj.city
            });
        }
    }
</script>

【讨论】：