打开谷歌地图信息窗口的回调方法答案

【问题标题】：Callback method for opening Google Maps InfoWindow打开谷歌地图信息窗口的回调方法
【发布时间】：2014-08-18 12:50:26
【问题描述】：

我正在使用 Google Maps v3，并且地图上有标记，单击时会显示信息窗口。 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。所以看起来“domready”发生在 InfoBubble 被渲染之前。

【问题讨论】：

标签： google-maps

【解决方案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));

【讨论】：

好的，很好。我在我的 initPopupCarousel() 方法中添加了一个 alert() 以查看它何时触发。警报出现在 InfoWindow 打开之前，这意味着我无法访问其中的任何 HTML 内容。所以在 InfoWindow 完成打开之前似乎“domready”发生了？
如果您需要帮助调试，请提供Minimal, Complete, Tested and Readable example。 similar question
您的代码不包含轮播。当您看到警报可能不相关时（当然它也可能被破坏，但无法从警报中分辨出来）。
similar question 和 example fiddle

【解决方案2】：

这就是我如何在 infoWindow 打开按钮 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"));             
  });  
});

【讨论】：