Google Maps API - 显示带有不同图标的标记

时间:2015-04-01 19:53:04

标签: javascript php google-maps google-maps-api-3

我的网站使用Google Map V3将标记保存到数据库。添加新标记后,它会打开一个信息窗口,其中包含要保存到PHP DB的表单。在此表单上有一个具有不同类别的选择字段。当显示地图时,我希望每个标记都有一个不同的图标,具体取决于它保存的类别。到目前为止,我可以加载地图并显示标记,但使用相同的图标。我已经从另一个项目添加了一些代码来浏览每个类别,但不太确定如何让它在这里工作:

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
        });

截至目前,它没有显示任何内容,我不确定这里应该输入“数据”:

$.each(data, function (i, MapPos) {

现有已保存的标记按如下方式加载:

$.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");
            });
        });

1 个答案:

答案 0 :(得分:0)

在create_marker函数的开头添加它可以根据类别显示图标:

// 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';
    }

但现在每个标记显示最后一行插入到数据库

中保存的信息