用于打开Goog​​le地图InfoWindow的回调方法

Question

我正在使用谷歌地图v3并在地图上有标记，点击时显示InfoWindow。 InfoWindow需要包含图像轮播。为了让我初始化轮播，我需要在InfoWindow打开后运行一些javascript。实际上我需要InfoWindow.open（）方法的回调。

但是我无法找到一个，因此在初始化图像轮播之前不得不求助于使用setTimeout等待1秒。这不太理想。

有人知道更好的方法吗？

使用完整代码更新

var widgetMap;
var widgetInfoWindow;
var widgetMarkers = [];
var popIndex = 0;
var popTotal = 0;

$(document).ready(function () {
    $.ajax({
        url: '/handlers/GoogleLocations.ashx?kmlpath=<%= KmlPath %>',
        dataType: "json",
        success: function (data) {
            clearData();
            initialize();
            LoadWidgetMapData(data);
        }
    });
});

function initialize() {

    var myLatlng = new google.maps.LatLng(53.32, -7.71);
    var mapOptions = {
        zoom: 7,
        center: myLatlng
    };

    widgetMap = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    widgetInfoWindow = new google.maps.InfoWindow();
    widgetInfoWindow = new InfoBubble({
        maxHeight: 275,
        maxWidth: 350,
        arrowSize: 30,
        arrowStyle: 2,
        borderRadius: 0,
        disableAutoPan: false
    });

    google.maps.event.addListener(widgetInfoWindow, 'domready', initPopupCarousel);
}

google.maps.event.addDomListener(window, 'load', initialize);

function LoadWidgetMapData(data) {

    var marker, i, image;

    for (i = 0; i < data.locations.length; i++) {
        var location = data.locations[i];
        if (location) {

            var pinColor = location.colour;
            var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
                new google.maps.Size(21, 34),
                new google.maps.Point(0, 0),
                new google.maps.Point(10, 34));

            marker = new google.maps.Marker({
                bubble: location.bubble,
                position: new google.maps.LatLng(location.latitude, location.longitude),
                map: widgetMap,
                icon: image
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {

                    widgetInfoWindow.setContent(data.locations[i].bubble);
                    widgetInfoWindow.open(widgetMap, marker);

                };
            })(marker, i));

            widgetMarkers.push(marker);
        }
    }
}

function clearData() {
    widgetMap = null;
    widgetInfoWindow = null;
    clearOverlays();
}

function clearOverlays() {
    for (var i = 0; i < widgetMarkers.length; i++) {
        widgetMarkers[i].setMap(null);
    }
    widgetMarkers = [];
}

function initPopupCarousel() {
    alert("here");
}

更新详细信息 我正在从Web服务加载KML，因为在其他位置过滤了地图标记。

此代码的当前行为是我单击标记，警报显示，然后打开InfoBubble。因此，在呈现InfoBubble之前，似乎会出现“domready”。

Answer 1

使用InfoWindow

的'domready'事件

google.maps.event.addListener(marker, 'click', (function (marker, i) {
   return function () {
       widgetInfoWindow.setContent(data.locations[i].bubble);
       widgetInfoWindow.open(widgetMap, marker);
       google.maps.event.addListener(widgetInfoWindow,'domready',initPopupCarousel);
   };
})(marker, i));

Answer 2

这是在打开信息窗口后设法控制按钮html的方式：

var contentString = '<button data-whatSite="'+whatSite+' "type="button" class="btn-site">Save</button>';

var infoWindow = new google.maps.InfoWindow({content: contentString});

google.maps.event.addListener(infoWindow, 'domready', function() {
  $(".btn-site").on('click', function(e) {
    console.log($(this).attr("data-whatSite"));             
  });  
});