保存点击谷歌地图标记ID -重置图标上的下一个标记单击

Save Clicked Google Maps Marker ID – Reset Icon On Next Marker Click

本文关键字:图标 下一个 单击 ID 谷歌 地图 保存 -重      更新时间:2023-09-26

我试图将引用保存到单击的Google Maps标记。目前我的代码是这样的:

  1. 单击标记。
  2. 检查标记具有的iconType (data-icon-type)(无论是Landmarks还是Projects)。
  3. 根据图标类型(data-icon-type),将图标切换为"活动"标记图标。

步骤1 - 3可以正常工作。但以下是我目前卡住的内容如下:

  • 保存所单击标记(data-marker-id)的id。
  • 当点击一个新的标记时,获得先前点击的标记的id,检查标记具有的iconType (data-icon-type)(无论是Landmarks还是Projects)。
  • 将先前点击的标记图标重置为"非活动"标记图标。
  • 设置新点击的标记图标为"活动"图标。
  • 我应该指出,我正在使用高级自定义字段谷歌地图字段填充我的地图位置。

    下面是渲染地图的各种函数:

    /*
     *  new_map
     *
     *  This function will render a Google Map onto the selected jQuery element
     *
     *  @type    function
     *  @date    8/11/2013
     *  @since   4.3.0
     *
     *  @param   jQueryel (jQuery element)
     *  @return  n/a
     */
    function new_map(jQueryel) {
        // var
        var jQuerymarkers = jQueryel.find('.marker');
        // vars
        var args = {
            minZoom: 12,
            maxZoom: 17,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            scrollwheel: false,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },
        };
        // create map               
        var map = new google.maps.Map(jQueryel[0], args);
        // add a markers reference
        map.markers = [];
        // add markers
        jQuerymarkers.each(function() {
            add_marker(jQuery(this), map);
        });
        // center map
        center_map(map);
        // return
        return map;
    }
    
    
    /*
         *  add_marker
         *
         *  This function will add a marker to the selected Google Map
         *
         *  @type    function
         *  @date    8/11/2013
         *  @since   4.3.0
         *
         *  @param   jQuerymarker (jQuery element)
         *  @param   map (Google Map object)
         *  @return  n/a
         */
        function add_marker(jQuerymarker, map) {
            // var
            var latlng = new google.maps.LatLng(jQuerymarker.attr('data-lat'), jQuerymarker.attr('data-lng'));
            var markerID = jQuerymarker.attr('data-marker-id');
            var cleanTitle = jQuerymarker.attr('data-clean-title');
            var iconType = jQuerymarker.attr('data-icon-type');
            var icon = {
                url: jQuerymarker.attr('data-icon'), // url
            };
            // create marker
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                id: markerID,
                icon: icon
            });
            // add to array
            map.markers.push(marker);
    
            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function() {
                var identification;
                if (jQuery('#box').hasClass('slide-right-active')) {
                    // Check to see what the previous icon was, 
                    //then it swaps out the icon for the original icon
                    if (prevIconType == 'landmarks') {
                        console.log("second landmarks");
                        icon = {
                            url: 'Landmarks.png', // url
                        };
                        marker.setIcon(icon);
                    } else if (prevIconType == 'projects') {
                        console.log("second projects");
                        icon = {
                            url: 'Projects.png', // url
                        };
                        marker.setIcon(icon);
                    }
                    // Check to see what the icon the clicked marker has, 
                   // then it swaps out the icon for the active icon
                    if (iconType === 'landmarks') {
                        icon = {
                            url: 'Landmarks-Active.png', // url
                        };
                        marker.setIcon(icon);
                        prevIconType = 'landmarks';
                    } else if (iconType === 'projects') {
                        icon = {
                            url: 'Projects-Active.png', // url
                        };
                        marker.setIcon(icon);
                        prevIconType = 'projects';
                    }
                } else {
                    // Check to see what the icon the clicked marker has, 
                   // then it swaps out the icon for the active icon
                    if (iconType === 'landmarks') {
                        icon = {
                            url: 'Landmarks-Active.png', // url
                        };
                        marker.setIcon(icon);
                        prevIconType = 'landmarks';
                    } else if (iconType === 'projects') {
                        icon = {
                            url: 'Projects-Active.png', // url
                        };
                        marker.setIcon(icon);
                        prevIconType = 'projects';
                    }
                }
            });
    
        }
    

    花了我一点时间,但我通过其他各种例子找到了它。一个对我有用的是:当点击其他

    时改变谷歌地图标记图标

    下面是我的代码,用于在单击事件上交换标记。

           google.maps.event.addListener(marker, 'click', (function(marker, i, center) {
               var identification;
               jQueryMarkerToolTip.hide();
               return function() {
                   for (var j = 0; j < markers.length; j++) {
                       if (markers[j].iconType === 'landmarks') {
                           icon = {
                               url: 'Landmarks.png', // url
                               scaledSize: new google.maps.Size(30, 30), // scaled size
                               origin: new google.maps.Point(0, 0), // origin
                               anchor: new google.maps.Point(0, 0) // anchor
                           };
                           markers[j].setIcon(icon);
                       }
                       if (markers[j].iconType === 'projects') {
                           icon = {
                               url: 'Projects.png', // url
                               scaledSize: new google.maps.Size(30, 30), // scaled size
                               origin: new google.maps.Point(0, 0), // origin
                               anchor: new google.maps.Point(0, 0) // anchor
                           };
                           markers[j].setIcon(icon);
                       }
                   }
                   if (iconType === 'landmarks') {
                       icon = {
                           url: 'Landmarks-Active.png', // url
                           scaledSize: new google.maps.Size(30, 30), // scaled size
                           origin: new google.maps.Point(0, 0), // origin
                           anchor: new google.maps.Point(0, 0) // anchor
                       };
                       marker.setIcon(icon);
                   } else if (iconType === 'projects') {
                       icon = {
                           url: 'Projects-Active.png', // url
                           scaledSize: new google.maps.Size(30, 30), // scaled size
                           origin: new google.maps.Point(0, 0), // origin
                           anchor: new google.maps.Point(0, 0) // anchor
                       };
                       marker.setIcon(icon);
                   }
               };
           })(marker, i, center));
           // add to array
           markers.push(marker);
           }
           }