Question

如上所述，我正在使用JQuery Map UI插件，我很难弄清楚如何获得一个位置列表，一旦点击，将打开地图中的信息窗口。

这是我的工作代码，用于提取地图标记并输出地图外的位置列表。

$.getJSON( 'data.php', function(data) {
$.each( data.markers, function(i, m) {
    var temp = m.services.split(',');
    $('#map_canvas').gmap('addMarker', {
        'position': new google.maps.LatLng(m.lat, m.lng),
        'bounds': true,
        'services':temp
    }).click(function() {
       $('#map_canvas').gmap('openInfoWindow', { 'content': m.address }, this);
    });
   //list of locations that once click, will open the map info window
    $('ul.list').append('<li><a href="#" >' + m.address + '</a></li>');
});
});

截至目前，上述内容仅允许地图内的实际标记打开信息窗口。任何有关UL项目列表可点击的帮助/指示以及打开信息窗口都将非常感激。

Answer 1

我可能的方式（可能还有其他人）：

将google.maps.Marker - 实例存储为<li> - 元素的属性，这样您只需点击此元素即可访问它并触发标记点击：

$.each( data.markers, function(i, m) {
    var temp = m.services.split(',');

    var marker=//<--create a local variable
          $('#map_canvas').gmap('addMarker', {
            'position': new google.maps.LatLng(m.lat, m.lng),
            'bounds': true,
            'services':temp
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': m.address }, this);
        })[0];//<--note the [0]

   //list of locations that once click, will open the map info window
    $('<li><a href="#" >' + m.address + '</a></li>')
      .data('marker',marker)
       .appendTo('ul.list')
        .click(function(e){
                e.preventDefault();
                google.maps.event.trigger($(this).data('marker'),'click');
              });
});

JQuery Map UI和链接打开信息窗口

1 个答案: