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

Javascript 使用PHP数据在Google地图上放置多个标记,javascript,php,google-maps,Javascript,Php,Google Maps,我正在制作一个网页,该网页从MySQL数据库获取信息,然后根据数据在地图上放置多个标记。虽然我的地图集成工作正常,但我使用PHP数据的代码阻止了地图的显示。但是,它没有显示任何错误 这是代码。我不熟悉JavaScript,但我相信问题出在包含PHP echo语句的函数中。我真的很感谢你的帮助 PHP: JavaScript: // Initialize and add the map function initMap() { var count = <?php echo $coun

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

这是代码。我不熟悉JavaScript,但我相信问题出在包含PHP echo语句的函数中。我真的很感谢你的帮助

PHP:

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++;?>
        });
    }
}

我理解为什么地图没有显示。缺少以下映射初始化

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

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

我无法理解这两个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>

你能提供一份证明你的问题的报告吗?HTML、CSS、JavaScript从页面呈现到浏览器。这两个sql查询的目的是什么?我认为可能是添加了所有标记,但由于使用或误用了php变量$count2,该变量初始化为零,从未更改过。您最好只使用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>