Question

我有这个Google地图代码并且有标记边栏。现在我想将active类添加到所选标记的按钮。我对谷歌编码不好，所以我希望你能在我的代码中指导我。

enter image description here

JS代码：

var mapOpts = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true,
    scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
//  We set zoom and center later by fitBounds()


/**
 * makeMarker() ver 0.2
 * creates Marker and InfoWindow on a Map() named 'map'
 * creates sidebar row in a DIV 'sidebar'
 * saves marker to markerArray and markerBounds
 * @param options object for Marker, InfoWindow and SidebarItem
 * @author Esa 2009
 */
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];

function makeMarker(options) {
    var pushPin = new google.maps.Marker({
        map: map
    });
    pushPin.setOptions(options);
    google.maps.event.addListener(pushPin, "click", function () {
        infoWindow.setOptions(options);
        infoWindow.open(map, pushPin);
        if (this.sidebarButton) this.sidebarButton.button.focus();
    });
    var idleIcon = pushPin.getIcon();
    if (options.sidebarItem) {
        pushPin.sidebarButton = new SidebarItem(pushPin, options);
        pushPin.sidebarButton.addIn("sidebar");
    }
    markerBounds.extend(options.position);
    markerArray.push(pushPin);
    return pushPin;
}

google.maps.event.addListener(map, "click", function () {
    infoWindow.close();
});


/**
 * Creates an sidebar item 
 * @constructor
 * @author Esa 2009
 * @param marker
 * @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,
 */

function SidebarItem(marker, opts) {
    var tag = opts.sidebarItemType || "button";
    var row = document.createElement(tag);
    row.innerHTML = opts.sidebarItem;
    row.className = opts.sidebarItemClassName || "sidebar_item";
    row.style.display = "block";
    row.style.width = opts.sidebarItemWidth || "120px";
    row.onclick = function () {
        google.maps.event.trigger(marker, 'click');
    }
    row.onmouseover = function () {
        google.maps.event.trigger(marker, 'mouseover');
    }
    row.onmouseout = function () {
        google.maps.event.trigger(marker, 'mouseout');
    }
    this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function (block) {
    if (block && block.nodeType == 1) this.div = block;
    else this.div = document.getElementById(block) || document.getElementById("sidebar") || document.getElementsByTagName("body")[0];
    this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function () {
    if (!this.div) return false;
    this.div.removeChild(this.button);
    return true;
}
/**
 * markers and info window contents
 */
makeMarker({
    position: new google.maps.LatLng(60.28527, 24.84864),
    title: "Vantaankoski",
    sidebarItem: "Vantaankoski",
    content: "Vantaankoski"
});
makeMarker({
    position: new google.maps.LatLng(60.27805, 24.85281),
    title: "Martinlaakso",
    sidebarItem: "Martinlaakso",
    content: "Martinlaakso"
});
makeMarker({
    position: new google.maps.LatLng(60.27049, 24.85366),
    title: "Louhela",
    sidebarItem: "Louhela",
    content: "Louhela"
});
makeMarker({
    position: new google.maps.LatLng(60.26139, 24.85478),
    title: "Myyrmäki",
    sidebarItem: "Myyrmäki",
    content: "Myyrmäki"
});
makeMarker({
    position: new google.maps.LatLng(60.24929, 24.86128),
    title: "Malminkartano",
    sidebarItem: "Malminkartano",
    content: "Malminkartano"
});
makeMarker({
    position: new google.maps.LatLng(60.23963, 24.87694),
    title: "Kannelmäki",
    sidebarItem: "Kannelmäki",
    content: "Kannelmäki"
});
makeMarker({
    position: new google.maps.LatLng(60.23031, 24.88353),
    title: "Pohjois-Haaga",
    sidebarItem: "Pohjois<br>Haaga",
    content: "Pohjois-Haaga"
});
makeMarker({
    position: new google.maps.LatLng(60.21831, 24.89354),
    title: "Huopalahti",
    sidebarItem: "Huopalahti",
    content: "Huopalahti"
});
makeMarker({
    position: new google.maps.LatLng(60.20803, 24.92039),
    title: "Ilmala",
    sidebarItem: "Ilmala",
    content: "Ilmala"
});
makeMarker({
    position: new google.maps.LatLng(60.19899, 24.93269),
    title: "Pasila",
    sidebarItem: "Pasila",
    content: "Pasila"
});
makeMarker({
    position: new google.maps.LatLng(60.17295, 24.93981),
    title: "Helsinki",
    sidebarItem: "Helsinki",
    content: "Helsinki"
});
/**
 *   fit viewport to markers
 */
map.fitBounds(markerBounds);

更新

我添加了此代码，我可以添加活动类。

if (this.sidebarButton)
    this.sidebarButton.button.focus();
    this.sidebarButton.button.setAttribute("class", "sidebar_item active");

但现在问题是前一课没有删除。它增加了每一个按钮。：（

Answer 1

要将活动班级按钮应用于所选标记，请按以下方式更改SidebarItem功能：

function SidebarItem(marker, opts) {
    var tag = opts.sidebarItemType || "button";
    var row = document.createElement(tag);/*Row is DOM Element of ClassName tag*/
    row.innerHTML = opts.sidebarItem;
    row.className = opts.sidebarItemClassName || "sidebar_item";
    row.style.display = "block";
    row.style.width = opts.sidebarItemWidth || "120px";
    row.onclick = function () {/*whenever row is clicked this function is executed*/
        $(".active").removeClass('active');
        $(row).addClass('active');/*converting row i.e. DOM Element into jQuery to apply jQuery function*/
        google.maps.event.trigger(marker, 'click');
    }
    row.onmouseover = function () {
        google.maps.event.trigger(marker, 'mouseover');
    }
    row.onmouseout = function () {
        google.maps.event.trigger(marker, 'mouseout');
    }
    this.button = row;
}


function makeMarker(options) {
    var pushPin = new google.maps.Marker({
        map: map
    });
    pushPin.setOptions(options);
    google.maps.event.addListener(pushPin, "click", function () {
        infoWindow.setOptions(options);
        infoWindow.open(map, pushPin);
        if (this.sidebarButton) {
            this.sidebarButton.button.focus()
            $(".active").removeClass('active');
            this.sidebarButton.button.setAttribute("class", "sidebar_item active");
        };
    });
    var idleIcon = pushPin.getIcon();
    if (options.sidebarItem) {
        pushPin.sidebarButton = new SidebarItem(pushPin, options);
        pushPin.sidebarButton.addIn("sidebar");
    }
    markerBounds.extend(options.position);
    markerArray.push(pushPin);
    return pushPin;
}

<强> Working fiddle

Answer 2

var marker = makeMarker({
    position: new google.maps.LatLng(60.17295, 24.93981),
    title: "Helsinki",
    sidebarItem: "Helsinki",
    content: "Helsinki"
});

marker.on('click', function(){
    $('#your_button_id').css({'color': 'red', 'background': '#000'});
});

如何将类添加到所选标记的按钮

2 个答案: