使用infowindow发布开启/关闭 [英] Issue toggle on/off with infowindow

问题描述

今天，我看到了关于在同一个按钮上打开/关闭的答案，我决定尝试使用。

我想要的是点击标记，而不是infowindow出现在我的地图中，但它不起作用。

JSFiddle 带infowindow的简单标记

JSFiddle toogle on / off，但没有infowindow

  google.maps.event.addDomListener（buttonCarrosUI，'）当我尝试加入（toowow与infowindow）时，点击'，函数（）{
 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（{ b $ b nt：title，
}）; 
 marker = new google.maps.Marker（{
 position：myLatLng，$ b $ map：map_canvas，
 icon：image，
 title：title 
} ）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map_canvas，marker）; 
}）; 
} 
}）; 
  

我得到这个问题

TypeError：标记未定义

var title = marker.title;

如果有人可以帮助我，我会非常感激。谢谢。 $ .each。除非您希望同时打开多个infowindow，否则最好创建一个全球infowindow并重用它。此外，您正在覆盖$ .each内的标记变量。请注意，这不适用于多个标记。如果您有多个（此代码来自单个折线的原始示例），则需要保留对数组中标记的引用。下面的代码适用于我：

  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）; 
}）; 
}）; 
 
} 
}）; 
  

工作小提琴

today i saw an answer about toggle on/off in the same button, and i decided to try to use.

What i want is to click in the marker and than a infowindow appear in my map, but it doesn't work.

JSFiddle simple marker with infowindow

JSFiddle toogle on/off but no infowindow

When i try to join(toogle with infowindow) like this:

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

I Got this issue

TypeError: marker is undefined

var title = marker.title;

I'll be very gratefull if someone can help me, thanks.

解决方案

You are creating the marker outside of the $.each. Unless you want more than one infowindow open at a time, it is better to make a global infowindow and reuse it. Also, you are overwriting the "marker" variable inside the $.each. Note that this wont work for more than one marker. You need to keep references to the markers in an array if you have more than one (the original example from which this code came toggled a single polyline). The code below works for me:

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发布开启/关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！