jquery - 使用 Google map 标记绑定(bind) jQuery 元素点击

Question

我正在使用 jQuery 绑定(bind) map 侧边栏作为 map 脚本的一部分。当我这样做时，我只是遇到一个小问题。当您单击侧边栏链接时，它始终会恢复打开最后一个标记的信息窗口。

这意味着我错误地绑定(bind)了链接，或者错误地触发了标记事件。如果有人可以帮助我指出正确的方向......非常感谢。

我正在使用的脚本。

var listings=[new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79)];
var names=['name 1','name 2','name 3'];
var descriptions=['description 1','description 2','description 3'];
var image = new google.maps.MarkerImage('/flag.png',new google.maps.Size(24,24),new google.maps.Point(0,0),new google.maps.Point(0,0));
var map;
var box;
function initialize() {
    var moptions = {
        zoom: 6,
        center: new google.maps.LatLng(43,-79),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        visible: true
    }
    var div = document.createElement('div');
    var boptions = {
        content: div,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
            background: "url('tipbox.gif') no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    };
    box = new InfoBox(boptions);
    for (var i = 0; i < listings.length; i++) {
        var marker = new google.maps.Marker({
            position: listings[i],
            map: map,
            draggable: false,
            icon: image,
            title: names[i]
        });
        AttachMessage(marker, i);
    }
}
function AttachMessage(marker, number) {
    google.maps.event.addListener(marker, 'click', function() { 
        box.close();
        box.setContent(descriptions[number]);
        box.open(map, marker);
    });

    //this is where I am having the issue ...

    $('#sidebar').find('#marker').unbind('click').bind('click', function (e) {
        google.maps.event.trigger(marker, 'click');
    });
}

侧边栏标记链接

<div id="sidebar">
    <ul>
        <li><a id="marker" href="#">Marker One</a></li>
        <li><a id="marker" href="#">Marker Two</a></li>
        <li><a id="marker" href="#">Marker Three</a></li>
    </ul>
</div>

Answer 1

通过创建一个制造商数组并将其添加到我的脚本中解决了这个问题

var listings=[new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79),new google.maps.LatLng(43,-79)];
var names=['name 1','name 2','name 3'];
var descriptions=['description 1','description 2','description 3'];
var image = new google.maps.MarkerImage('/flag.png',new google.maps.Size(24,24),new google.maps.Point(0,0),new google.maps.Point(0,0));
var markers = [];
var map;
var box;
function initialize() {
    var moptions = {
        zoom: 6,
        center: new google.maps.LatLng(43,-79),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        visible: true
    }
    var div = document.createElement('div');
    var boptions = {
        content: div,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
            background: "url('tipbox.gif') no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    };
    box = new InfoBox(boptions);
    for (var i = 0; i < listings.length; i++) {            
        var marker = new google.maps.Marker({
            position: listings[i],
            map: map,
            draggable: false,
            icon: image,
            title: names[i]
        });
        markers.push(marker);
        AttachMessage(marker, i);
    }
}
function AttachMessage(marker, number) {
    google.maps.event.addListener(marker, 'click', function() { 
        box.close();
        box.setContent(descriptions[number]);
        box.open(map, marker);
    });
}
function OpenMessage(i) {
    google.maps.event.trigger(markers[i],'click');
};