保存点击Google地图标记ID - 重置下一个标记图标点击

Question

我正在尝试保存对已点击的Google地图标记的引用。目前我的代码是这样工作的：

1. 单击标记。
2. 检查标记具有哪个iconType（data-icon-type）（地标或项目）。
3. 根据标记所具有的iconType（data-icon-type），将图标切换到“活动”标记图标。

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

1. 保存点击标记的标识（data-marker-id）。
2. 单击新标记时，获取之前点击的标记的标识，检查标记具有哪个iconType（data-icon-type）（标记或项目）。
3. 将之前点击的标记图标重置为“不活动”标记图标。
4. 将新点击的标记图标设置为“活动”图标。

我应该指出，我使用高级自定义字段Google Map字段来填充我的地图位置。

下面是渲染地图的各种功能：

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


    } 

Answer 1

我花了一段时间，但我想它希望通过各种其他例子。那个为我工作的是：Change Google Maps marker icon when clicking on other

这是我的代码，用于交换click事件上的标记。

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