Google Maps Marker更改圖標基於與變量匹配的ID

Question

編輯：

我有一個谷歌地圖，我想找到一個ID匹配變量的標記，然后將此特定標記的圖標設置為其他圖像。 變量是這樣設置的：

var nearId = document.getElementsByClassName("nearest")[0].id;

我的Google Maps代碼在下面，並包含兩個圖標defaultIcon和ActiveIcon。 單擊后，圖標將更改。 我一直在嘗試應用以下邏輯：

if (locations[i][3] === nearId) { activeIcon } else { defaultIcon }

但是，將此應用到某個地方會讓我感到困惑。

/**** GOOGLE MAPS API ****/

var map;

function init() {
var center;

var gmarkers = [];


// ICONS
var defaultIcon = {url: 'https://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-ff0303/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/star-3.png',
size: new google.maps.Size(28, 28),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(14, 28)};
var activeIcon = {url: 'https://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-002bff/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/star-3.png',
size: new google.maps.Size(28, 28),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(14, 28)};
var shape = {
    coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
    type: 'poly'
};

// OPTIONS
var mapOptions = {
    center: new google.maps.LatLng(53.9,-2),
    zoom: 4,
    zoomControl: false,
    disableDoubleClickZoom: true,
    mapTypeControl: false,
    scaleControl: false,
    scrollwheel: false,
    panControl: false,
    streetViewControl: false,
    draggable : true,
    overviewMapControl: false,
    overviewMapControlOptions: {
        opened: false,
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP

}
var mapElement = document.getElementById('map-canvas');
var map = new google.maps.Map(mapElement, mapOptions);

// LOCATIONS
var locations = [
    ['Germany', 48.134866, 11.584064, '#date1'],
    ['Italy', 45.465503, 9.187345, '#date2'],
    ['Spain', 40.428285, -3.704256, '#date3'],
    ['Portugal', 38.725081, -9.139089, '#date4'],
    ['Belgium', 50.849648, 4.355852, '#date5'],
    ['France', 50.629706, 3.057288, '#date6'],
    ['Netherlands', 52.370000, 4.895868, '#date7'],
    ['UK', 51.511338, -0.126318, '#date8']       
];



for (i = 0; i < locations.length; i++) {           
    marker = new google.maps.Marker({
        map: map,
        title: locations[i][0],
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),             
        id: locations[i][3],
        icon: defaultIcon

    });

    google.maps.event.addListener(marker, "click", function () {
        for (var i = 0; i < gmarkers.length; i++) {
            gmarkers[i].setIcon(defaultIcon);
        }
        this.setIcon(activeIcon);
    });
    gmarkers.push(marker);
}


}   
google.maps.event.addDomListener(window, 'load', init);

請幫忙！ 謝謝。

Answer 1

您應該做些什么來收聽map's "center_changed"事件，進行計算並找到距當前中心的距離最小的興趣點。

我在這里創建了一個快速演示，希望對您有所幫助
http://jsfiddle.net/wo36774d/