街景中标记上的信息窗口

Question

根据 Google 文档，当您在 gmap 上创建标记时，该标记也会“复制”到街景版本的地图上。

但是，onClick 事件绑定没有被复制（或者至少看起来没有），所以我无法在街景中打开标记上的 InfoWindow。

理想情况下，我实际上可以为 StreetView 版本的 InfoWindow 定义不同的内容，但现在我什至无法打开相同的 InfoWindow。

我正在使用 Google 示例中的代码在主地图标记上创建 InfoWindow 绑定，如下所示（包装在一个函数中）：

google.maps.event.clearListeners(marker,'click');
google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
//      infoWindow.open(map.getStreetView(), marker);
});

该注释行是我尝试为街景版本的标记添加开启器，但它没有做任何事情。

注意：map 是地图对象，marker 是标记对象，html 包含要放入信息窗口的 HTML 字符串。所有这些都适用于主地图标记，因此它不是传递空变量或任何东西的问题。问题仅在于让街景标记在单击时弹出它的信息窗口。

---

请注意，这不是 Google Maps StreetView InfowIndows opening on map 的重复项，因为此问题是由于我这边的编码问题造成的，并且已使用已接受答案中的步骤解决。链接的问题是指 Google 对其 API 所做的更改，该更改破坏了某些功能或至少导致其以不良方式运行。

Answer 1

TL;DR

我能够通过以下步骤使其工作：

1. 拥有两 (2) 个独立的 InfoWindows；一张用于地图，一张用于街景全景
2. 在实例化 InfoWindows 时显式定义 InfoWindowOptions.position 的值
3. 将null 作为参数传递给InfoWindow.open() 方法的anchor 参数

示例

// The geolocation point
var point = new google.maps.LatLng(10.5884708621,122.7016563883);

// The map
var map = new google.maps.Map(document.getElementById('map'), {
    center: point,
    zoom: 20,
    mapTypeId: "satellite",
});

// The marker
var marker = new google.maps.Marker({
    title: "Hello world!",
    position: point,
    label: {text:"hello",color:"#ffffffde",fontWeight:"bold",fontSize:"18px"},
    map: map
});

// The InfoWindow for the map view
var mapInfoWindow = new google.maps.InfoWindow({
    content: "foo",
    position: point // refer to step #2
});

// The InfoWindow for the street view
var streetViewPanoramaInfoWindow = new google.maps.InfoWindow({
    content: "bar",
    position: point, // refer to step #2
    disableAutoPan: true // optional but helpful
});

// The click event handler for the marker
marker.addListener('click', function() {
    var streetViewPanorama = map.getStreetView();

    // when streetview was engaged
    if(streetViewPanorama.getVisible()==true) {
        streetViewPanoramaInfoWindow.open(streetViewPanorama); // refer to step #3
    }
    // when normal aerial view was engaged
    else {
        mapInfoWindow.open(map); // refer to step #3
    }
});

Answer 2

我的第一个错误是我试图在地图副本和标记的街景副本上显示相同的 InfoWindow。

这是不允许的，因此创建 InfoWindow 的第二个实例解决了这个问题。

为了创建两个单独的 InfoWindows 并将它们附加到同一个标记的两个副本上，我不得不稍微修改我的代码。

以上代码来自一个名为 bindInfoWindow() 的函数，该函数基于 Google 文档中的代码。我对其进行了修改以包含一个参数来指定 map 或 streetView 对象。

下一个问题是每次调用bindInfoWindow() 时都会调用clearListeners 方法，从而有效地删除了标记的地图副本的onClick 绑定。

因此，我将 clearListeners 调用移至函数外部，并在调用 binInfoWindow() 之前调用它。

最终的函数如下所示：

function bindInfoWindow(marker, mapOrStreetViewObject, infoWindowObject, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infoWindowObject.setContent(html);
        infoWindowObject.open(mapOrStreetViewObject, marker);
    });
}

然后使用序列调用它：

// Note that the mapObject and streetViewObject variables are defined elsewheer to point to the map nd streetView instances in use.

//Define the local variables that we'll use in the calls
var myMapInfoWindow = new google.maps.InfoWindow;
var mapInfoWindowHTML = 'some stuff';
var myStreetViewInfoWindow = new google.maps.InfoWindow;
var streetViewInfoWindowHTML = 'some stuff';

// Remove any existing listeners from the marker
google.maps.event.clearListeners(marker,'click');

// Bind the event for the map marker click
bindInfoWindow(markerObject, mapObject, myMapInfoWindow, mapInfoWindowHTML);
//Bind the event for the StreetView marker click
bindInfoWindow(markerObject, streetViewObjectObject, myStreetViewInfoWindow, streetViewInfoWindowHTML);

这样做的好处是，如果您在地图上打开信息窗口，然后打开街景视图，街景视图上已经打开了相同的信息窗口！