Javascript 谷歌地图API-显示具有不同图标的标记
我的网站使用Google Map V3将标记保存到数据库中。添加新标记后,它会打开一个信息窗口,其中包含一个要保存到PHPDB的表单。此表单上有一个具有不同类别的选择字段。显示地图时,我希望每个标记都有一个不同的图标,具体取决于它保存的类别。到目前为止,我可以加载地图,它显示标记,但具有相同的图标。我已经从另一个项目中添加了一些代码来浏览每个类别,但不太确定如何在这里使其工作:Javascript 谷歌地图API-显示具有不同图标的标记,javascript,php,google-maps,google-maps-api-3,Javascript,Php,Google Maps,Google Maps Api 3,我的网站使用Google Map V3将标记保存到数据库中。添加新标记后,它会打开一个信息窗口,其中包含一个要保存到PHPDB的表单。此表单上有一个具有不同类别的选择字段。显示地图时,我希望每个标记都有一个不同的图标,具体取决于它保存的类别。到目前为止,我可以加载地图,它显示标记,但具有相同的图标。我已经从另一个项目中添加了一些代码来浏览每个类别,但不太确定如何在这里使其工作: function create_marker(MapPos, eName, eDesc, eCateg, eDate,
function create_marker(MapPos, eName, eDesc, eCateg, eDate, InfoOpenDefault, DragAble, Removable, iconPath)
{
//erase all existing markers
for (var i in event_markers)
{
event_markers[i].setMap(null);
}
//loop through each data row
$.each(data, function (i, MapPos) {
// Display the Icon by category
if(eCateg == 'meeting')
{
iconPath = 'static/assets/meeting_marker1.png';
}
else if(eCateg == 'clean')
{
iconPath = 'static/assets/clean_marker2.png';
}
else if(eCateg == 'priority')
{
iconPath = 'static/assets/alert_marker.png';
}
var marker = new google.maps.Marker({
position: MapPos,
map: map,
icon: iconPath,
title: eName
});
到目前为止,它没有显示任何内容,我不确定这里的“数据”应该是什么:
现有保存的标记的加载方式如下:
$.get("event_data.php", function (data) {
$(data).find("marker").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");
});
});
$.get(“event_data.php”,函数(数据){
$(数据)。查找(“标记”)。每个(函数(){
var name=$(this.attr('name');
var description=''+$(this.attr('description')+'';
var category=$(this.attr('category');
var-edate=$(this.attr('edate');
var point=new google.maps.LatLng(parseFloat($(this.attr('lat')),parseFloat($(this.attr('lon'));
创建_标记(点、名称、描述、类别、edate、false、false、false,“static/assets/new_event_marker.png”);
});
});
在“创建标记”功能的开头添加此选项,可根据类别显示图标:
// Display the Icon by category
switch(eCateg){
case 'meeting': iconPath = 'static/assets/meeting_marker1.png'; break;
case 'clean' : iconPath = 'static/assets/clean_marker2.png'; break;
case 'special' : iconPath = 'static/assets/special_marker.png'; break;
case 'priority' : iconPath = 'static/assets/alert_marker.png';
}
但现在,每个标记都会显示最后一行插入数据库时保存的信息
// Display the Icon by category
switch(eCateg){
case 'meeting': iconPath = 'static/assets/meeting_marker1.png'; break;
case 'clean' : iconPath = 'static/assets/clean_marker2.png'; break;
case 'special' : iconPath = 'static/assets/special_marker.png'; break;
case 'priority' : iconPath = 'static/assets/alert_marker.png';
}