谷歌地图API-显示具有不同图标的标记

Google Maps API - displaying markers with different icons

本文关键字：图标 API- 显示 谷歌地图      更新时间：2023-09-26

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

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

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

但现在，每个标记都显示与插入DB 的最后一行一起保存的信息

相关文章：