1

单击地图外的元素时如何触发“infoWindow”？

我有这个：

var locations = [
  ['Location 1', 59.917224,10.587052, 1],
  ['Location 2', 59.912665,10.726153, 2]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 9,
  center: new google.maps.LatLng(59.913869,10.752245),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

并拥有一个 HTML：

<ul>
<li>Trigger Marker 1</li>
<li>Trigger Marker 1</li>
</ul>

有什么好主意吗？谢谢！

更新

在这里更新了代码：

var locations = [ ['位置 1', 59.917224,10.587052, 1], ['位置 2', 59.912665,10.726153, 2] ];

map = new google.maps.Map(document.getElementById('map'), {
  zoom: 9,
  center: new google.maps.LatLng(59.913869,10.752245),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

var markerMap = {}

for (i = 0; i < locations.length; i++) {
  markerMap[ "marker-" + i ] = marker  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

 $(".marker-list").on('click', function() {
 var id = $(this).find('li').attr( 'data-id' );
 alert(id)
 infoWindow.open( map, markerMap[ id ] );
 }); 

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

HTML：

<ul class="marker-list">
<li data-id="marker-1">Trigger Marker 1</li>
<li data-id="marker-2">Trigger Marker 1</li>
</ul>
4

3 回答 3

2

尝试使用循环内的任何 id 字段将标记放置到对象上，例如：

//before loop declare object
var markerMap = {}
...
//inside loop add marker to object with uuid (e.g mareker-1)
markerMap[ "marker-" + i ] = marker

然后将相同的 id 参数添加到您的 HTML 标记中

<ul class="marker-list">
   <li data-id="marker-1">Trigger Marker 1</li>
   <li data-id="marker-2">Trigger Marker 2</li>
</ul>

最后将事件添加到 li 元素（例如使用 jQuery）

 $(".marker-list").click( function() {
     var id = $(this).attr( 'data-id' );
     infoWindow.open( map, markerMap[ id ] );
 });

我没有测试这段代码。它只是一个想法。我希望你知道我在想什么

于 2013-05-31T10:24:58.233 回答
1

基于对您的代码的此更新：

markerMap[ "marker-" + i ] = marker

这应该在“marker-1”上打开信息窗口：

google.maps.event.trigger(markerMap["marker-1"], "click");
于 2013-05-31T13:07:22.877 回答
0

将每个标记保存在一个数组中，然后单击 li，只需使用数组中的相应标记

var markers = [];
for (i = 0; i < locations.length; i++) {  
  markers[i] = marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
于 2013-05-31T10:23:43.903 回答