Javascript 基于它的谷歌地图标记更改图标'；s ID与变量匹配

编辑：

我有一个谷歌地图，我想找到一个ID与变量匹配的标记，然后将这个特定标记的图标设置为不同的图像。变量的设置方式如下：

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

我的谷歌地图代码如下，包含两个图标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);

/****谷歌地图API****/
var映射；
函数init（）{
var中心；
var gmarkers=[]；
//图标
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',
大小：新谷歌地图大小（28,28），
来源：新google.maps.Point（0,0），
主播：新的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',
大小：新谷歌地图大小（28,28），
来源：新google.maps.Point（0,0），
主播：新的google.maps.Point（14,28）}；
变量形状={
坐标：[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,16,20,20,8,18,4,16,2,15,13,0]，
类型：“poly”
};
//选择权
变量映射选项={
中心：新google.maps.LatLng（53.9，-2），
缩放：4，
动物控制：错误，
禁用双击缩放：真，
mapTypeControl:false，
scaleControl:false，
滚轮：错误，
泛控制：错误，
街景控制：错误，
真的，
overviewMapControl:错误，
概述MapControlOptions：{
开：错，
},
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var mapeelement=document.getElementById（'map-canvas'）；
var map=new google.maps.map（mapElement，mapOptions）；
//地点
变量位置=[
[德国，48.134866，11.584064，#日期1']，
[意大利，45.465503，9.187345，#日期2']，
[西班牙，40.428285，-3.704256，#日期3']，
[葡萄牙，38.725081，-9.139089，#日期4']，
[比利时，50.849648，4.355852，#日期5']，
[法国，50.629706，3.057288，#日期6']，
[荷兰，52.370000，4.895868，#日期7']，
[UK'，51.511338，-0.126318，#date8']
];
对于（i=0；i

---

请帮忙！谢谢。

您应该做些什么来收听

地图的“中心改变”

事件，计算并找到距离当前中心最小的兴趣点

我在这里创建了一个快速演示，希望对您有所帮助

---

对不起，我的意思是按时间而不是地理位置最接近。JS在巡演日期列表中选择最近的即将到来的日期，并应用一个“最近的”类，这使该div处于活动状态，我想对相应的地图标记执行相同的操作。然后，您可以将信息存储到日期类中，并找出哪一个是最近的事件