使用 infowindow 发布切换 on/off

Question

今天我在同一个按钮中看到一个关于切换 on/off 的答案，我决定尝试使用。

我想要的是单击标记，然后在我的地图中出现一个信息窗口，但它不起作用。

JSFiddle toogle on/off but no infowindow

当我尝试像这样加入（用信息窗口切换）时：

google.maps.event.addDomListener(buttonCarrosUI, 'click', function() {
  if(marker && marker.setMap){
      if (marker.getMap() != null)
          marker.setMap(null);
     else marker.setMap(map_canvas);
  }else{
      var myLatLng;
      var title = marker.title;
      $.each( data.markers, function(i, marker) {
          myLatLng = new google.maps.LatLng(marker.latitude, marker.longitude);
      });
      var infowindow = new google.maps.InfoWindow({
          content: title,
      });
          marker = new google.maps.Marker({
              position: myLatLng,
              map: map_canvas,  
              icon: image,
              title: title
          });
          google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map_canvas,marker);
          });
   }
});

我遇到了这个问题

TypeError: marker is undefined

var title = marker.title;

如果有人能帮助我，我将不胜感激，谢谢。

Answer 1

您正在 $.each 之外创建标记。除非您希望一次打开多个信息窗口，否则最好制作一个全局信息窗口并重复使用它。此外，您正在覆盖 $.each 中的 "marker" 变量。请注意，这不适用于多个标记。如果您有多个标记，则需要在数组中保留对标记的引用（此代码来自的原始示例切换了一条多段线）。下面的代码对我有用：

google.maps.event.addDomListener(buttonCarrosUI, 'click', function () {
    var data = JSON;
    var myLatLng;
    if (marker && marker.setMap) {
        if (marker.getMap() != null) marker.setMap(null);
        else marker.setMap(map_canvas);
    } else {
        $.each(data.markers, function (i, markerInfo) {
            myLatLng = new google.maps.LatLng(markerInfo.latitude, markerInfo.longitude);
            marker = new google.maps.Marker({
                position: myLatLng,
                map: map_canvas,
                title: markerInfo.title
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(marker.getTitle());
                infowindow.open(map_canvas, marker);
            });
        });

    }
});

working fiddle

使用 infowindow 发布切换 on/off

Issue toggle on/off with infowindow

javascript

jquery

google-maps

google-maps-api-3