StreetView 中标记上的 InfoWindows

Question

根据 Google 文档，当您在 gmap 上创建标记时，该标记也会 'copied' 到地图的 StreetView 版本上。

但是，不会复制 onClick 事件绑定（或者至少看起来不会），所以我无法在 StreetView 中打开标记上的信息窗口。

理想情况下，我实际上能够为 InfoWindow 的 StreetView 版本定义不同的内容，但现在我什至无法打开相同的 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字符串。所有这些都适用于主地图标记，因此这不是传递空变量或任何东西的问题。问题仅在于让 StreetView 标记在单击时弹出它的信息窗口。

请注意，这不是的重复，因为此问题是由于我这边的编码问题引起的，并且已使用已接受答案中的步骤解决。链接的问题是指对他们的 API 所做的更改 Google，这破坏了某些功能或至少导致它以不受欢迎的方式运行。

Answer 1

我的第一个错误是我试图在标记的地图副本和 StreetView 副本上显示相同的信息窗口。

这是不允许的，因此创建 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);

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

Answer 2

TL;DR

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

有两（2）个独立的信息窗口；地图一张，街景全景一张
在实例化 InfoWindows

InfoWindowOptions.position

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

StreetView 中标记上的 InfoWindows

InfoWindows on Markers in StreetView

javascript

google-maps

google-maps-api-3

google-street-view

TL;DR

例子