Question

我想在 div （html）中插入一个谷歌地图，它通过 while循环生成。 Google地图从数据库中获取坐标。

由于我需要使用 google map api key ，我使用了以下代码。

但是，它显示地图，仅在第一个div ，使用数据库的最后一个坐标，并且不显示t显示任何其他div中的任何其他地图。

<?php 
    $connection = mysqli_connect('localhost', 'root', '', 'users');


    function currentUsers($connection){
        $sql = "SELECT * FROM user ";
        $result = mysqli_query($connection, $sql);

        if(mysqli_num_rows($result) > 0){
            while($row = mysqli_fetch_assoc($result)) {
                $userID = $row['id'];
                $firstName = $row['firstname'];
                $country = $row['country'];
                $latitude = $row['latitude'];
                $longitude = $row['longitude'];

                echo '<div> 
                            <div align = "left">
                                <h3>'. $userID. " ". $firstName. " ". $country. '</h3>
                            </div>

                            <div id  = "map" align = "right">
                                <script>    <!--Google map api-->
                                  function initMap() {
                                    var x = '. $latitude. ';
                                    var y = '. $longitude. ';
                                    var myLatLng = {lat: x, lng: y};

                                    var map = new google.maps.Map(document.getElementById(\'map\'), {
                                      center: myLatLng,
                                      scrollwheel: true,
                                      zoom: 4
                                    });

                                    var marker = new google.maps.Marker({
                                      map: map,
                                      position: myLatLng,
                                      title: \'Hello World!\'
                                    });
                                  }
                                </script>
                                <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
                            </div>  
                       </div>';
            }

        }else{
            echo "Currently there are no users!";
        }

        mysqli_close($connection);
    }

    currentUsers($connection);


?>

<html>
<head><title></title>
      <style> #map {width: 500px; height: 400px; } </style>  <!--Size of the map-->
</head>
<body></body>
</html>

Answer 1

每个div的ID应该是唯一的。试试这个

<?php 
        $connection = mysqli_connect('localhost', 'root', '', 'users');


        function currentUsers($connection){
            $sql = "SELECT * FROM user ";
            $result = mysqli_query($connection, $sql);
            $x= 0;
            if(mysqli_num_rows($result) > 0){
                while($row = mysqli_fetch_assoc($result)) {
                    $userID = $row['id'];
                    $firstName = $row['firstname'];
                    $country = $row['country'];
                    $latitude = $row['latitude'];
                    $longitude = $row['longitude'];

                    echo '<div> 
                                <div align = "left">
                                    <h3>'. $userID. " ". $firstName. " ". $country. '</h3>
                                </div>

                                <div id  = "map_'.$x.'" align = "right">
                                    <script>    <!--Google map api-->
                                      function initMap() {
                                        var x = '. $latitude. ';
                                        var y = '. $longitude. ';
                                        var myLatLng = {lat: x, lng: y};

                                        var map = new google.maps.Map(document.getElementById("map_'.$x.'"), {
                                          center: myLatLng,
                                          scrollwheel: true,
                                          zoom: 4
                                        });

                                        var marker = new google.maps.Marker({
                                          map: map,
                                          position: myLatLng,
                                          title: \'Hello World!\'
                                        });
                                      }
                                    </script>
                                    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
                                </div>  
                           </div>';
                           $x++;
                }

            }else{
                echo "Currently there are no users!";
            }

            mysqli_close($connection);
        }

        currentUsers($connection);


    ?>

    <html>
    <head><title></title>
          <style> #map {width: 500px; height: 400px; } </style>  <!--Size of the map-->
    </head>
    <body></body>
    </html>

Answer 2

您只能可靠地包含API一次。目前，您要为添加的每个地图添加API。
您也可以只有一个名为import android.app.AlertDialog; import android.app.Dialog; import android.app.Fragment; import android.content.DialogInterface; import android.content.Intent; import android.os.Bundle; public class ExceedingLimitFragment extends Fragment { public Dialog onCreateDialogExceed (Bundle savedInstanceState) { super.onCreate(savedInstanceState); AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setTitle(R.string.exceeding_limit_title); builder.setMessage(R.string.exceeding_limit_message); builder.setPositiveButton(R.string.exceeding_limit_positive, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { Intent ExceedingLimitPositiveIntent = new Intent (ExceedingLimitFragment.this.getActivity(), SettingsMenu.class); startActivity(ExceedingLimitPositiveIntent); } }); builder.setNegativeButton(R.string.exceeding_limit_negative, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { dialog.cancel(); } }); return builder.create(); } }的函数，目前您包含该函数的多个版本。
您只能拥有一个id =“map”的div，目前每个位置都有一个。

相关问题（仅限javascript，无PHP）：Adding multiple map canvases to window - Google Maps Javascript API v3

Answer 3

这是100％为我工作我已经测试过这段代码

android:textAllCaps="true"

如何通过while循环插入谷歌地图？

3 个答案: