javascript - StreetView 中标记上的 InfoWindows

标签 javascript google-maps google-maps-api-3 google-street-view

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

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

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

我正在使用 Google 示例中的代码在主 map 标记上创建 InfoWindow 绑定(bind),如下所示(包装在一个函数中):

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是 map 对象,marker是标记对象,html包含要放入InfoWindow的HTML字符串。所有这些都适用于主 map 标记,因此这不是传递空变量或任何东西的问题。问题仅在于让 StreetView 标记在单击时弹出它的 InfoWindow。


请注意,这不是 Google Maps StreetView InfowIndows opening on map 的副本因为这个问题是由于我这边的编码问题引起的,并且使用已接受答案中的步骤解决了。链接的问题是指谷歌对其 API 所做的更改,该更改破坏了部分功能或至少导致其以不受欢迎的方式运行。

最佳答案

长话短说

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

  1. 拥有两 (2) 个独立的信息窗口;一张用于 map ,一张用于街景全景
  2. 明确定义 InfoWindowOptions.position 的值在实例化 InfoWindows 时
  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
    }
});

关于javascript - StreetView 中标记上的 InfoWindows,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31028935/

相关文章:

javascript - Angular 4 - 验证器自定义函数未定义

google-maps - 在 typescript 类中创建谷歌地图实例

jquery - google.maps.places.Autocomplete 在 fancybox 内不起作用

javascript - 从谷歌地理编码API获取latLong

javascript - JS API 应该将 jqXHR 转换为 Promises 吗?

javascript - Datejs 计算一周中的下几天和前几天

javascript - React中setState增量和每次增量1有什么区别

javascript - 标记在 Google map API 中不起作用

javascript - 谷歌地图显示灰色屏幕而不是 map

javascript - 检查位置是否在收费公路上