街景中标记的信息窗口

InfoWindows on Markers in StreetView

本文关键字：信息 信息窗 窗口      更新时间：2023-09-26

根据谷歌文档，在gmap上创建标记时，标记也会"复制"到地图的StreetView版本上。

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

理想情况下，我实际上可以为街景版的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包含要放入InfoWindow的HTML字符串。所有这些都适用于主映射标记，所以这不是传递空变量或任何东西的问题。问题只是让StreetView标记在单击时弹出其信息窗口。

请注意，这不是谷歌地图街景InfowIndows在地图上打开的副本，因为这个问题是由于我这边的编码问题，并且使用公认答案中的步骤解决了。与此相关的问题指的是谷歌对其API所做的更改，该更改破坏了其中的一些功能，或者至少导致其行为不理想。

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

我的第一个错误是试图在标记的地图副本和StreetView副本上显示相同的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);

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

相关文章：