Question

目前我有一个带有一些标记的地图（由XML循环加载），我使用一个小插件（InfoBubble）来改善信息窗口。问题是在法线贴图中我可以加载，显示和隐藏信息点击标记，它按预期工作。但当我改为街景模式时，infowindow仅在第一次显示时，如果我关闭它，它永远不再显示，并且当它试图获取当前地图时我从信息插件插件中收到错误：

未捕获的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
            }
        });
    });
});

通过标记显示infowindows的代码。它在街景模式下无效：

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

当我切换到街景模式时，我仍然可以看到infowindow，但如果我关闭它，我就不能再用以上评论的错误重新打开它了。

Answer 1

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

它会引发错误，因为它试图获取地图方法.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);
    }
}

修复后，我们可以成功加载街景地图的InfoBubbles，问题代码将按原样运行。

在街景中显示InfoWindow（使用InfoBubble）

1 个答案: