jQuery GMAP3 包装器 - 点击信息窗口

Question

我第一次在项目中使用 jQuery GMAP 3 包装器。 一切顺利 - 但找不到如何将信息气泡添加到标记的示例，但只有在单击标记时才会出现...

我正在使用的 addMarker 函数是：

function addMarker($this, i, lat, lng){
  $this.gmap3({
    action : 'addMarker',
    lat: lat,
    lng: lng,
    marker:{
      options:{
        icon:new google.maps.MarkerImage(\"../../a/img/find-a-ground/markers/marker.png\", new google.maps.Size(40, 40))
      }
   }
});

谁能举例说明如何添加仅在单击标记时显示的信息窗口？

谢谢， 史蒂夫

Answer 1

也许这会对你有所帮助。

var toAddress = "1071 SW 101ST,Hollywood,FL,33025";
var infoWinMsg = "this is a sample address";

function setMarkerObject(toAddress, infoWinMsg) {
  $this.gmap3({
    action: 'addMarker',
    address: toAddress,
    marker: {
      options: {
        icon: new google.maps.MarkerImage("../../a/img/find-a-ground/markers/marker.png", new google.maps.Size(40, 40)),
        draggable: false
      },
      events: {
        mouseover: function (marker, event) {
          $(this).gmap3({
            action: 'addinfowindow',
            anchor: marker,
            options: {
              content: infoWinMsg
            }
          });
        },
        mouseout: function () {
          var infowindow = $(this).gmap3({
            action: 'get',
            name: 'infowindow'
          });
          if (infowindow) {
            infowindow.close();
          }
        }
      }
    },
    infowindow: {
      open: false,
      options: {
        content: infoWinMsg
      }
    },
    map: {
      center: true,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControl: true,
      scrollwheel: true,
      streetViewControl: true
    }
  });
}

Answer 2

您应该将事件侦听器添加到标记：

function addMarker($this, i, lat, lng){
  $this.gmap3({
    action : 'addMarker',
    lat: lat,
    lng: lng,
    marker:{
      options:{
        icon:new google.maps.MarkerImage("../../a/img/find-a-ground/markers/marker.png", new google.maps.Size(40, 40))
      },
      events: {
        // add events here
        click: function(marker, event, data) { infoWindowOpen($this, marker, data) },
      },
      // also you can add marker-depending-data to fill info window content
      data: "hello! i am infowindow!"
    }
});

// global variable to store google InfoWindow object
// (I assume that you have only one info window)
var infoWindow = null;

function infoWindowOpen($this, marker, data) {
    if (infoWindow) {
        var map = $this.gmap3('get'); // returns google Map object
        infoWindow.open(map, marker);
    } else {
        // create info window above marker
        $this.gmap3({action: 'addInfoWindow', anchor: marker});
        // get google InfoWindow object 
        infoWindow = $this.gmap3({action:'get', name:'infoWindow'});
    }
    infoWindow.setContent(data);
}