Jquery-ui-map平移到按钮单击上的标记和打开信息框

时间:2012-09-11 13:09:11

标签: jquery google-maps google-maps-api-3 jquery-ui-map

我正在使用jquery-ui-map通过json获取数据并在我的地图上显示。这很好。

但我想做的是通过点击我的html页面上的某些链接来平移到所选标记

所以我有

链接exmaple与id =“13”或其他

我点击它并平移并打开所选标记的信息窗口

我想我需要在标记本身上有一些id所以我用json把它拉出我的数据库,否则我迷路了......

我正在使用此示例从json获取数据 http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-json.html

$(function () {
    demo.add(function () {
        $('#map_canvas').gmap({
            'disableDefaultUI': false,
            'callback': function () {
                var self = this;
                $.getJSON('jsonfile', function (data) {
                    $.each(data.markers, function (i, marker) {
                        self.addMarker({
                            'id': marker.id,
                            'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                            'icon': 'images/stendas.png',
                            'bounds': true
                        }).click(function () {
                            self.openInfoWindow({
                                'content': marker.content
                            }, this);
                        });
                    });
                });
            }
        });
    }).load();
});

我的json是

{
    "markers": [{
        "latitude": "55.347889111331924",
        "longitude": "23.01470909375007",
        "title": "Kaunas-Marijampol\u0117",
        "content": "<p>Kelyje Kaunas-Marijampol\u0117 \u00a0(25,5 km nuo Kauno)<\/p>\r\n<p><img src=\"images\/stendu_nuotraukos\/JA_reklaminis_stendas_15000x5000_1_mariampole_r1_c1.jpg\" alt=\"JA reklaminis stendas 15000x5000 1 mariampole r1 c1\" height=\"280\" width=\"370\" \/><\/p>",
        "id": "9"
    }, {
        "latitude": "55.260338151525985",
        "longitude": "24.78350792187507",
        "title": "Panev\u0117\u017eys \u2013 Vilnius",
        "content": "<p>Kelyje Panev\u0117\u017eys \u2013 Vilnius (79 km nuo Vilniaus, prie Ukmerg\u0117s)\u00a0<\/p>\r\n<p><img src=\"images\/stendu_nuotraukos\/P5211983_r1_c1.jpg\" alt=\"P5211983 r1 c1\" height=\"280\" width=\"370\" \/><\/p>",
        "id": "10"
    }, {
        "latitude": "54.87660670317833",
        "longitude": "24.24517784375007",
        "title": "Vilnius \u2013 Kaunas 1",
        "content": "<p>Kelyje Vilnius \u2013 Kaunas (70 km nuo Vilniaus link Kauno)<\/p>\r\n<p><img src=\"images\/stendu_nuotraukos\/Nuo_Vilniaus_1_stendo_puse_r1_c1.jpg\" alt=\"Nuo Vilniaus 1 stendo puse r1 c1\" height=\"280\" width=\"370\" \/><\/p>",
        "id": "11"
    }, {
        "latitude": "54.794351653090246",
        "longitude": "24.68463096875007",
        "title": " Vilnius \u2013 Kaunas 2",
        "content": "<p>Kelyje Vilnius \u2013 Kaunas (55 km nuo Vilniaus link Kauno)<\/p>\r\n<p><img src=\"images\/stendu_nuotraukos\/SDC11331_r1_c1.jpg\" alt=\"SDC11331 r1 c1\" height=\"280\" width=\"370\" \/><\/p>",
        "id": "12"
    }, {
        "latitude": "55.720922855823375",
        "longitude": "21.37774620312507",
        "title": " Klaip\u0117da \u2013 Kaunas",
        "content": "<p>Kelyje Klaip\u0117da \u2013 Kaunas (14,5km nuo Klaip\u0117dos link Kauno)<\/p>\r\n<p><img src=\"images\/stendu_nuotraukos\/P9050011_r1_c1.jpg\" alt=\"P9050011 r1 c1\" height=\"280\" width=\"370\" \/><\/p>",
        "id": "13"
    }]
}

找到至少允许打开任何标记的代码

function (map, marker) {
    $('.item-page').click(function () {
        $(marker).triggerEvent('click');
        return false;
    });
}

现在需要具体针对id = 13

的标记

0 个答案:

没有答案