谷歌地图 - 数据库中的标记仅显示最后一行的信息

Question

我有一个使用谷歌地图 v3 设置的地图，其中标记保存到数据库中。一个新的标记信息窗口包含一个将数据保存到 PHP 数据库的表单。加载地图时，会显示标记并单击它们时可以看到相应的信息。这里的问题是所有标记都显示了插入最后一行时保存的信息。

这会从数据库中加载数据：

// Get markers from XML - (event_data.php)
        $.get("event_data.php", function (data) {
            $(data).find("markers").each(function () {
                  var name = $(this).attr('name');
                  var description = '<p>'+ $(this).attr('description') +'</p>';
                  var category = $(this).attr('category');
                  var edate = $(this).attr('edate');
                  var point = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lon')));
                  create_marker(point, name, description, category, edate, false, false, false, "static/assets/new_event_marker.png");
            });
        });

这是显示已保存标记的内容：

function create_marker(MapPos, eName, eDesc, eCateg, eDate, InfoOpenDefault, DragAble, Removable, iconPath)
{
var marker = new google.maps.Marker({
        position: MapPos,
        map: map,
        draggable:DragAble,
        title: eName,
        icon: iconPath
    }); 

    // Content to be displayed in event InfoWindows
    var eventContent = $('<div class="event-details">' + '<h4 class="event-name">' + eName + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + eDate + '</p></span>' +
        '<p class="event-description">'+ eDesc +'</p>' +
        '<button type="button" name="remove-event" class="remove-event btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Event</button>'+
        '</div>');

    //set the content of infoWindow
    infowindow.setContent(eventContent[0]);

当我在浏览器中运行 event_data.php 时，它会返回所有已保存的事件标记。

我也运行了 console.log(eName);就在“var marker”之前，它返回数据库中的所有项目，但有1个额外的“undefined”：

undefined
event1
event2
event3

fiddle demonstrating issue

Answer 1

你只有一个信息窗口，当你打开它时，它会显示你最后给它的内容。

从以下位置更改您的点击侦听器：

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker); 
});

收件人（在打开之前设置新内容）：

google.maps.event.addListener(marker, 'click', function() {
  //set the content of infoWindow
  infowindow.setContent(eventContent[0]);
  infowindow.open(map,marker); 
});

working fiddle

代码sn-p：

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    create_marker(map.getCenter(), "num1", "descript1", "cat1", "1/1/2011", false, true, true, "");
    create_marker(new google.maps.LatLng(37.4, -122.2), "num2", "descript2", "cat2", "1/2/2011", false, true, true, "");

}
google.maps.event.addDomListener(window, "load", initialize);

function create_marker(MapPos, eName, eDesc, eCateg, eDate, InfoOpenDefault, DragAble, Removable, iconPath) {
    var marker = new google.maps.Marker({
        position: MapPos,
        map: map,
        draggable: DragAble,
        title: eName
    });

    // Content to be displayed in event InfoWindows
    var eventContent = $('<div class="event-details">' + '<h4 class="event-name">' + eName + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + eDate + '</p></span>' +
        '<p class="event-description">' + eDesc + '</p>' +
        '<button type="button" name="remove-event" class="remove-event btn btn-warning btn-sm"><span class="glyphicon glyphicon-remove"></span> Remove Event</button>' +
        '</div>');

    google.maps.event.addListener(marker, 'click', function () {
        //set the content of infoWindow
        infowindow.setContent(eventContent[0]);
        infowindow.open(map, marker);
    });
}

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>