Question

编辑：

我有谷歌地图，我想找到一个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);

请帮忙！感谢。

Answer 1

你应该怎么做才能听取map's "center_changed"事件，并计算并找到与当前中心距离最小的兴趣点。

我在这里创建了一个快速演示，希望这会有所帮助 http://jsfiddle.net/wo36774d/

Google Maps Marker根据匹配变量的ID更改图标

1 个答案: