javascript - 从 MySQL 拉取时在 Google map 中显示多个信息框

Question

我有以下代码，并且已经在这个问题上停留了很长时间。我能够显示多个标记，但在弹出的信息框中单击时无法让它们显示信息详细信息。现在我正试图让它说“嘿!”作为测试。如有任何建议，我们将不胜感激!

<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
        async defer>
    </script>
<script type="text/javascript">
        var map;
		
		var image = 'images/marker_blast.png';
		
		 
		
        function initialize() {
            // Set static latitude, longitude value
            var latlng = new google.maps.LatLng(40.4313684, -79.9805005);
            // Set map options
            var myOptions = {
                zoom: 11,
                center: latlng,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            // Create map object with options
            map = new google.maps.Map(document.getElementById("map"), myOptions);
			
			//MARK MAP
				<?php
				$markers = $mysqli->query("SELECT * FROM reports");
						
				while($row_marker = $markers->fetch_assoc()) {
					
					// uncomment the 2 lines below to get real data from the db
					// $result = mysql_query("SELECT * FROM parkings");
					// while ($row = mysql_fetch_array($result))
						echo "addMarker(new google.maps.LatLng(".$row_marker['lat'].", ".$row_marker['lng']."), map);\n";
						
						
						
				
				}
				?>
				}
	
				
				function addMarker(latLng, map) {
					var marker = new google.maps.Marker({
						position: latLng,
						map: map,
						icon: image,
						size:30,
						draggable: false, // enables drag & drop
						animation: google.maps.Animation.DROP
					});
							
				}
				
				var infowindow = new google.maps.InfoWindow();  
					google.maps.event.addListener(marker, 'mouseover', (function(marker) {  
							   return function() {  
								   var content = "Hey";  
								   infowindow.setContent(content);  
								   infowindow.open(map, marker);  
							   }  
							 })(marker));  
				
	
        </script>

Answer 1

您需要在标记所在的 addMarker 函数中将 InfoWindow 附加到标记:

function addMarker(latLng, name,  map) {
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: image,
        size: 30,
        draggable: false, // enables drag & drop
        animation: google.maps.Animation.DROP
    });
    google.maps.event.addListener(marker, 'mouseover', (function (marker) {
      return function () {
        var content = "Hey "+name;
        infowindow.setContent(content);
        infowindow.open(map, marker);
      }
    })(marker));
}

proof of concept fiddle