TL;博士

Question

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

但是，onClick事件绑定不会被复制（或者至少看起来不是这样），所以在StreetView中我无法在标记上打开InfoWindow。

理想情况下，我实际上可以为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);
});

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

注意：map是地图对象，marker是标记对象，html包含要放入InfoWindow的HTML字符串。所有这些都适用于主地图标记，所以它是传递空变量或任何东西的问题。问题是只有在单击时让StreetView标记弹出它的InfoWindow。

Answer 1

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

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

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

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

下一个问题是，每次调用clearListeners时都会调用bindInfoWindow()方法，从而有效地删除了标记的地图副本的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);

这有什么好处，如果你在地图上打开一个InfoWindow，然后打开StreetView，街景上已经打开了同样的InfoWindow！

Answer 2

TL;博士

我能够使用以下步骤：

有两（2）个独立的InfoWindows;一张用于地图，一张用于街景全景
在实例化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:field.code,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
    }
});

关于街景标记的InfoWindows

2 个答案:

TL;博士

示例