用于打开Goog​​le Maps InfoWindow的回调方法 [英] Callback method for opening Google Maps InfoWindow

问题描述

我正在使用Google Maps v3，并且在地图上有一些标记，这些标记在单击时会显示一个InfoWindow. InfoWindow需要包含一个图像轮播.为了初始化轮播，我需要在InfoWindow打开后运行一些JavaScript.实际上，我需要InfoWindow.open()方法的回调.

I am using Google Maps v3 and have markers on the map which show an InfoWindow when clicked. The InfoWindow needs to contain an image carousel. In order for me to initialize the carousel, I need to run some javascript after the InfoWindow has opened. In effect I need a callback for the InfoWindow.open() method.

但是我找不到一个，因此不得不使用setTimeout来等待1秒钟，然后再初始化图像轮播.这不理想.

However I am unable to find one so have had to resort to using setTimeout to wait for 1 second before initializing the image carousel. This is not ideal.

有人知道更好的方法吗?

Does anybody know of a better way?

已更新完整代码

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，因为在其他地方正在过滤地图标记.

UPDATE DETAILS I am loading the KML from a web service as there is filtering of map markers taking place elsewhere.

此代码的当前行为是我单击一个标记，显示警报，然后打开InfoBubble.因此看来，准备就绪"发生在渲染InfoBubble之前.

The current behavior with this code is that I click a marker, the alert shows and then the InfoBubble opens. So it appears that "domready" occurs BEFORE the InfoBubble is rendered.

推荐答案

使用信息窗口

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

这篇关于用于打开Goog​​le Maps InfoWindow的回调方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！