保存點擊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); 
     } 
     }