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

Question

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

Uncaught TypeError: map.getDiv is not a function

加载街景时的代码(这按预期工作，但也许可以改进):

// _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() 方法返回的街景对象不兼容。

它会抛出错误，因为它正在尝试获取 map 方法 .getDiv()、.getCenter() 和 .panTo()。为了解决它，我修复了一些插件，执行以下操作:

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

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

对于 .getCenter():

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

对于 .panTo():

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

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