在街景中显示InfoWindow(使用InfoBubble)

Question

目前我有一个地图与一些标记(由一个循环从XML加载)，我正在使用一个小插件(InfoBubble)来改进infowindows。问题是，在法线地图，我可以加载，显示和隐藏的信息窗口点击标记，它的工作如预期。但是当我切换到街景模式时，信息窗口只显示第一次，如果我关闭它，它永远不会再显示，当infobubble插件试图获取当前地图时，我得到了一个错误:

Uncaught TypeError: map。getDiv不是一个函数

代码当我加载街景(这工作如预期的，但也许它可以改进):

// _this.Gmap.Map represents the current map
// _this.Gmap.Markers[index] represents the current marker
// _this.Gmap.InfoWindows[index] represents the current infowindow for the current marker with same index
// $('.Gmarker') is the html content inside the infowindow
google.maps.event.addListener(_this.Gmap.InfoWindows[index], 'domready', function () {
    var $target = $('.Gmarker').parent().parent();
    $target.addClass('InfoWindow');
    $target.next().addClass('InfoWindowArrow');
    // close the current infowindow
    $('.close', '.Gmarker').on('click', function () {
        _this.Gmap.InfoWindows[index].close();
    });
    // change to street view
    $('.streetview', '.Gmarker').on('click', function () {
        var $thismarker = $(this);
        var ll = [];
        for (var i in _this.Gmap.InfoWindows[index].position) {
            if (_this.Gmap.InfoWindows[index].position[i] !== undefined) ll.push(_this.Gmap.InfoWindows[index].position[i]);
        }
        var latlng = new google.maps.LatLng(ll[0], ll[1]);
        var panorama = _this.Gmap.Map.getStreetView();
        _this.Gmap.StreetViewService.getPanoramaByLocation(latlng, 100, function () {
            if (arguments[1] === google.maps.StreetViewStatus.OK) {
                $('.buttons .streetview', $thismarker).hide();
                panorama.setPosition(latlng);
                panorama.setPov({
                    heading: !$('pov heading', $row).text().length ? parseFloat($('pov headcar', $row).text()) : parseFloat($('pov heading', $row).text()),
                    pitch: !$('pov pitch', $row).text().length ? parseFloat($('pov pitchar', $row).text()) : parseFloat($('pov pitch', $row).text()),
                    zoom: parseInt($('pov zoom', $row).text())
                });
                _this.Gmap.HideMarkers();
                // here is where I show the current (selected) marker with its infowindow. this works.
                _this.Gmap.Markers[index].setVisible(true);
                _this.Gmap.InfoWindows[index].open(_this.Gmap.Map.getStreetView());
                panorama.setVisible(true);
                google.maps.event.addListener(panorama, 'closeclick', function () {
                    $('.buttons .streetview', $thismarker).show();
                    _this.Gmap.HideMarkers(true);
                });
            }
            else {
                // there is no sv
            }
        });
    });
});

通过标记显示信息窗口的代码。它不能在街景模式下工作:

google.maps.event.addListener(_this.Gmap.Markers[index], 'click', function () {
    _this.Gmap.HideInfoWindows();
    _this.Gmap.HideMarkers();
    _this.Gmap.Markers[index].setVisible(true);
    if (_this.Gmap.Map.getStreetView().getVisible()) {
        _this.Gmap.InfoWindows[index].open(_this.Gmap.Map.getStreetView()); // this line throws the error
    }
    else _this.Gmap.InfoWindows[index].open(_this.Gmap.Map);
    $('.mini', '#resultados').fadeOut(250);
    _this.Gmap.ReCenterMap();
});

情况是，当我切换到街景模式时，我仍然可以看到信息窗口，但如果我关闭它，我就无法再打开它，并出现我上面评论的错误。

Answer 1

InfoBubble插件与map.getStreetView()方法返回的街景对象不兼容

抛出一个错误，因为它试图获得映射方法.getDiv(), .getCenter()和.panTo()。为了解决这个问题，我对插件做了如下修改:

当插件尝试使用不存在的方法并抛出错误时，对于.getDiv():

var mapDiv = typeof map.getDiv === "function" ? map.getDiv() : map.getContainer();

For .getCenter():

var centerPos = projection.fromLatLngToContainerPixel(typeof map.getCenter === "function" ? map.getCenter() : map.position);

For .panTo():

if (typeof map.getCenter === "function") {
    if (map.getCenter() != latLng) {
        map.panTo(latLng);
    }
}

修复后，我们可以成功加载街景地图的InfoBubbles，问题代码将正常工作。