Google会根据ID映射标记切换div

Question

我很难在谷歌地图中切换标记，特别是我正在使用gmaps.js来打开和关闭div。在“点击”功能如何切换div打开和关闭。以下是适合我的示例交互： https://www.google.com/maps/d/viewer?mid=zbteFZbu8JKc.kxnGVlIRxhQI&hl=en

arraylist = {
    name: "Gunung Kinabalu",
    height: 4095,
    latitude: 6.07484,
    longitude: 116.562853,
    location: "Sabah",
    picture: "Gunung Kinabalu.jpg"
 },

map = new GMaps({
        el: '#map',
        lat: 4.2062722,
        lng: 107.9405116,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        minZoom: 6,
        maxZoom: 10,
        panControl : false,
        streetViewControl : false,
        mapTypeControl: false,
        overviewMapControl: false,
     });

      for(var i = 0; i < arrayList.length; i++) {
        map.addMarker({
          id : arrayList[i].name,
          lat: arrayList[i].lat,
          lng: arrayList[i].lng,
          title: arrayList[i].name,
          infoWindow: {
            content: arrayList[i].name
          },              
          details: {
             name:arrayList[i].name,
             pic:arrayList[i].pic,
             height:arrayList[i].height,
             loc:arrayList[i].loc,
          },
          mouseover: function(e){
            this.infoWindow.open(this.map, this);
          },
          mouseout: function(e){
             this.infoWindow.close(this.map, this);
          },
          click: function(e){
             //here the events to toggle div
          }
        });
      }

Answer 1

我没有足够的评论意见，所以在这里回答。

如果我理解你的问题，你想要切换标记的infoWindow和mouseover上的mouseout。这是一个工作小提琴，当您将鼠标悬停在标记上时显示infoWindow，当您移出标记时将其关闭 - http://jsfiddle.net/e52792j5/822/。

您的代码主要包含变量名称中的错误。您只需将变量名称从arraylist更改为arrayList，由于它是一个数组，因此应将其括在[]中。此外，latitude函数中的属性键为longtitude和addMarker，而不是lat和lng。

修改

这是更新的小提琴，可以点击div并点击标记的详细信息 - http://jsfiddle.net/e52792j5/940/

for循环中的arrayList对象不会被click事件处理程序继承，因为只有在for循环执行完毕后才会执行处理程序。正如评论中所提到的，您必须使用闭包来访问父作用域变量。要访问单击处理程序中的arrayList对象，您可以使用自动调用的匿名函数，该函数将i的值与e绑定。像这样：

click: (function(e){
    return function () {
       alert(e.name);
    }
})(arrayList[i])

要点击div并点击标记的详细信息，可以使用CSS过渡和jQuery的组合。

jQuery：

click: (function(e){
    return function () {
        var result = "  <button>close</button><p>"+ e.name +"</p><p>" + e.latitude+"  </p><p>"+ e.longitude+ "</p>";
        $("#toggleDetails").html(result);
        $("#toggleDetails").addClass("active"); 
    }
})(arrayList[i])

<强> CSS：

#toggleDetails {
  width: 150px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -150px;
  background-color: white;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease; 
}

#toggleDetails.active {
  left: 0px;
}

希望这会有所帮助。