Google地图 - 数据库中的标记仅显示最后一行的信息 [英] Google Maps - markers from database displaying information from the last row only
本文介绍了Google地图 - 数据库中的标记仅显示最后一行的信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Google maps v3创建了一个地图，其中标记保存在数据库中。新的标记信息窗口包含一个将数据保存到PHP数据库的表单。加载地图时，会显示标记，点击时可以看到相应的信息。这里的问题是所有的标记都会显示插入最后一行时保存的信息。
这会从DB加载数据：
//从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）;
}）;
} ）;
这是显示已保存的标记的内容：
函数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
}）;
//在事件InfoWindows中显示的内容
var eventContent = $（'< div class =event-details>'+'< h4 class =event-名称>'+ eName +'< / h4>< hr> +
'< span>< h5>日期：< / h5>'+
'< p class =event-date>'+ eDate +'< / p>< / span>'+
'< p class =event-description>'+ eDesc +'< / p>'+
'< button type =buttonname =remove-eventclass =remove-event btn btn-warning btn-sm>< span class =glyphicon glyphicon-移除>< / span>移除事件< / button>'+
'< / div>'）;
//设置infoWindow的内容
infowindow.setContent（eventContent [0]）;
当我在浏览器中运行event_data.php时，它会返回所有已保存的事件标记。
我也运行console.log（eName）;在var marker之前，它将返回数据库中的所有项目，但有1个额外的undefined：
undefined
event1
event2
event3
小提琴演示题 只有一个infowindow，当你打开它时，它显示你给它的最后一个内容。
更改你的点击监听器：
google.maps.event.addListener（marker，'click'，function（）{
infowindow.open（map，marker）;
} ）;
到（在打开它之前设置新内容）：
google.maps.event.addListener（marker，'click'，function（）{
//设置infoWindow的内容
infowindow。 setContent（eventContent [0]）;
infowindow.open（map，marker）;
}）; b
$ b nofollow>工作小提琴
代码片段：
$ b
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）;函数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}）; //内容显示在事件InfoWindows var eventContent = $（'< div class =event-details>'+'< h4 class =event-name>'+ eName +'< / h4>< hr>'+'< span>< h5>日期：< / h5>'+'< p class =event-date>'+ eDate +'< / p><< ; / span>'+'< p class =event-description>'+ eDesc +'< / p>'+'< button type =buttonname =remove-event删除事件< /按钮>'+'< / div>'）;< / span>< google.maps.event.addListener（marker，'click'，function（）{//设置infoWindow的内容infowindow.setContent（eventContent [0]）; infowindow.open（map，marker）;}）;}
html，body，#map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
I have a map set up with Google maps v3 where markers are saved to a DB. A new markers info window contains a form which saves data to a PHP database. When the map is loaded, the markers are displayed and corresponding info can be seen when they are clicked. The problem here is that all the markers display the information that is saved with the last row inserted.
This loads data from the DB:
// 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");
});
});
And This is what displays the saved markers:
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]);
When I run event_data.php in the browser, it returns all the event markers that have been saved.
I also have run console.log(eName); right before "var marker", and it returns all the items in the database, but with 1 extra with"undefined":
undefined
event1
event2
event3
解决方案 You only have one infowindow, when you open it, it displays the last content you gave it.
Change your click listener from:
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
To (set the new content before you open it):
google.maps.event.addListener(marker, 'click', function() {
//set the content of infoWindow
infowindow.setContent(eventContent[0]);
infowindow.open(map,marker);
});
code snippet:
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>
这篇关于Google地图 - 数据库中的标记仅显示最后一行的信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
