Google 地图 API 显示相同数据的多个标记 InfoWindowContent

Question

我已经对数据进行了安慰，没问题，我看到不同的名字被正确地安慰了。多个标记也正在创建，但在 InfoWindow 上它只显示每个标记的最后一行的数据。

<?php

  include 'connect.php';

  $locations=array();
  $apikey = "APIKEY";
  $query = $db->query('SELECT * FROM fields');
  while( $row = $query->fetch_assoc() ){

            $name = $row['field_name'];
            $longitude = $row['field_longitude'];                              
            $latitude = $row['field_latitude'];
            $owner = $row['field_owner'];
            $incharge = $row['field_incharge_name'];
            $contact_number = $row['contact_number'];
            $field_address = $row['field_address'];
            $field_pitch_length = $row['field_pitch_length'];
            $field_pitch_breadth = $row['field_pitch_breadth'];
            $ground_busy_hours_per_week = $row['ground_busy_hours_per_week'];
            $locations[]=array('field_name'=>$name,'lat'=>$latitude,'lng'=>$longitude, 'owner'=>$owner, 'incharge'=>$incharge, 'contact_number'=>$contact_number, 'field_address'=>$field_address, 'field_pitch_length'=>$field_pitch_length, 'field_pitch_breadth'=>$field_pitch_breadth, 'ground_busy_hours_per_week'=>$ground_busy_hours_per_week);
        }
        $markers = json_encode($locations);

?>
  <body>
    <div id="map"></div>

    <script>
        <?php
            echo "var markers=$markers;\n";
        ?>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 10,
              center: {lat: 15.3489395, lng: 73.7347356},
              mapTypeId: 'roadmap'
            });                               

            for(i = 0; i < markers.length; i++) {
          var infoWindow = new google.maps.InfoWindow(), marker;
                infoWindowContent = '<div class="info_content">' +
                '<h4>Field Name: </h4><p>'+' '+markers[i].field_name+'</p><br>' +
                '<h4>Owner: </h4><p>'+' '+markers[i].owner+'</p><br>' +
                '<h4>Incharge: </h4><p>'+' '+markers[i].incharge+'</p><br>' +
                '<h4>Contact No: </h4><p>'+' '+markers[i].contact_number+'</p><br>' +
                '<h4>Field Address: </h4><p>'+' '+markers[i].field_address+'</p><br>' +
                '<h4>Pitch Length: </h4><p>'+' '+markers[i].field_pitch_length+'</p><br>' +
                '<h4>Pitch Breadth: </h4><p>'+' '+markers[i].$field_pitch_breadth+'</p><br>' +
                '<h4>Busy Hours per Week: </h4><p>'+' '+markers[i].ground_busy_hours_per_week+'</p><br>' +
                '</div>';
                lat = parseFloat(markers[i].lat);
                lng = parseFloat(markers[i].lng);
              var position = new google.maps.LatLng(lat, lng);
              marker = new google.maps.Marker({
                    position: position,
                    map: map
              });


            google.maps.event.addListener(marker, 'click', (function(marker) {
                return function() {
                    infoWindow.setContent(infoWindowContent);
                    infoWindow.open(map, marker);
                }
            })(marker));
            }
            google.maps.event.addDomListener(window, 'load', initMap);
        }   


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap">
    </script>
  </body>

抱歉无法共享数据库，也许您可以使用虚拟数据进行测试。我不知道为什么它只显示最后一行的数据。

感谢您的帮助。

Answer 1

我认为您还需要将 "infoWindowContent" 传递给闭包。

google.maps.event.addListener(marker, 'click', (function(marker, infoWindowContent) {
            return function() {
                infoWindow.setContent(infoWindowContent);
                infoWindow.open(map, marker);
            }
        })(marker, infoWindowContent));

Google 地图 API 显示相同数据的多个标记 InfoWindowContent

Google Maps API Multiple Marker InfoWindowContent showing same data

javascript

php

google-maps-api-3

google-maps-markers