谷歌地图使用php和jquery动态显示许多标记

Question

我有一个谷歌地图，我想链接到数据库，使用PHP和MySQL动态显示许多标记。

我的代码

<?php
//This creates an array from the database and allows us to use it later in the jquery
//CREATE SQL STATEMENT
$sql_locations = "SELECT * FROM tbllocations";

//CONNECT TO MYSQL SERVER
require('test-connection.php');

//EXECUTE SQL STATEMENT
$rs_locations = mysqli_query($vconnection, $sql_locations);

//CREATE AN ASSOCIATIVE ARRAY
$rs_locations_rows = mysqli_fetch_assoc($rs_locations);
$place = $rs_location_rows['place'];
$city = $rs_location_rows['city'];
$long = $rs_location_rows['long'];
$lat = $rs_location_rows['lat'];
?>
<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>


<style>

#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100vh;
}


</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [


       <?php do{?>

        ['<?php echo $place . ", " . $city;?>', <?php echo $long . "," . $lat;?>],

        <?php } while($rs_location_rows = mysqli_fetch_assoc($rs_location))?>

        ['Palace of Westminster, London', 51.499633,-0.124755]


        //['London Eye, London', 51.503454,-0.119562],
        //['Palace of Westminster, London', 51.499633,-0.124755]
    ];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][1]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(16);
        google.maps.event.removeListener(boundsListener);
    });

}



</script>

问题是我从php中的关联数组中获取所有标记变量，如果我回显它们就会显示它们。然而，当我在do while循环中通过jquery函数传递它们时，它只显示地图上的两个标记而不是所有标记。

我的理论是我没有正确地在我的jquery中编写for循环，这导致代码只显示两个标记。

Answer 1

我猜，问题在于您定义了变量// Remember the last Left used. // We first set it to the Left of buttonA plus its Width. int lastLeft = buttonA.Left + buttonA.Width; // button1 now gets set to this plus a gap of 10 pixels button1.Left = lastLeft + 10; // Remember the last position lastLeft = button1.Left + button1.Width; // Set next button button2.Left = lastLeft + 10; // Remember... lastLeft = button2.Left + button2.Width; ，$place，$city一次并且您永远不会覆盖它。

所以也许你有两个以上的标记，但除[$long之外的所有标记都是相同的标记。

UPDATE：工作示例，注释掉你的sql东西，并在marker数组中写了一些坐标。如果您在数据库中有此信息，则必须调整'Palace of Westminster, London', 51.499633, -0.124755]，您也可以将其添加到php infoWindowContent数组中，或者在此示例中创建一个新的$marker。

结果：我得到了所有已定义的标记。如果这样做有效，请尝试从您需要的内容中删除评论$marker，如果仍有问题，请在//中尝试进行调试：

foreach

工作示例：

foreach( $rs_locations as $rs_location ) {
  var_dump( $rs_location );
  ......

编辑：从我的示例中删除了重复的div //This creates an array from the database and allows us to use it later in the jquery //CREATE SQL STATEMENT $sql_locations = "SELECT * FROM tbllocations"; //CONNECT TO MYSQL SERVER //<--------- require('test-connection.php'); //EXECUTE SQL STATEMENT //<--------- $rs_locations = mysqli_query($vconnection, $sql_locations); $markers = array( // your example['Palace of Westminster, London', 51.499633,-0.124755] array( 'Palace of Westminster, London', 51.499633, -0.124755 ), array( 'Westminster Abbey, London', 51.4992453, -0.1272561 ), array( 'QEII Centre, London', 51.4997296, -0.128683 ), array( 'Winston Churchill Statue, London', 51.5004308, -0.1275243 ), array( 'Fitzroy Lodge Amature Boxing Club, London', 51.4954215, -0.1154758 ), array( 'Balham Boxing Club, London', 51.4419539, -0.1336075 ) ); // use this for your code //foreach( $rs_locations as $rs_location ) { // $markers[] = array( // "{$rs_location['place']}, {$rs_location['city']}", // $rs_location['long'], // $rs_location['lat'] // ); //} ?> <div id="map_wrapper"> <div id="map_canvas" class="mapping"></div> </div> <style> #map_wrapper { height: 400px; } #map_canvas { width: 100%; height: 100vh; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { mapTypeId: "roadmap", center: new google.maps.LatLng(52.791331, -1.918728), // somewhere in the uk BEWARE center is required zoom: 3, }; // Display a map on the page map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); map.setTilt(45); // Multiple Markers var markers = <?php echo json_encode( $markers ); ?>; // Info Window Content var infoWindowContent = [ ['<div class="info_content">' + '<h3>London Eye</h3>' + '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'], ['<div class="info_content">' + '<h3>Palace of Westminster</h3>' + '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' + '</div>'] ]; // Display multiple markers on a map var infoWindow = new google.maps.InfoWindow(); var marker, i; // Loop through our array of markers & place each one on the map for (i = 0; i < markers.length; i++) { var position = new google.maps.LatLng(markers[i][1], markers[i][2]); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, title: markers[i][0] }); // Allow each marker to have an info window google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infoWindow.setContent(infoWindowContent[i][0]); infoWindow.open(map, marker); } })(marker, i)); // Automatically center the map fitting all markers on the screen map.fitBounds(bounds); } //Override our map zoom level once our fitBounds function runs (Make sure it only runs once) var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) { this.setZoom(10); google.maps.event.removeListener(boundsListener); }); } google.maps.event.addDomListener(window, 'load', initialize); </script>