Привязка кликов элемента jQuery с помощью маркеров Google Map - PullRequest
Новая
       40

Привязка кликов элемента jQuery с помощью маркеров Google Map

3 голосов
/ 02 июля 2011

Я использую jQuery для привязки боковой панели карты как части сценариев карты. Когда я делаю это, у меня возникает одна маленькая проблема. Когда вы нажимаете на ссылки на боковой панели, она всегда возвращается к открытому информационному окну последнего маркера.

Это означает, что я неправильно связываю свои ссылки или неправильно запускаю событие маркера. Если кто-то может помочь направить меня в правильном направлении ... высоко ценится.

Я использую сценарии. 

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>

1 Ответ

2 голосов
/ 02 июля 2011

Решил этот вопрос, создав массив maker и добавив его в мои скрипты 

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');
};
...