Google Maps API - 在街景视图中点击标记时显示Infowindow

时间:2018-02-17 09:43:32

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

当我点击常规地图中的地图标记时,会弹出信息窗口 但是它在街景中不起作用。 JsFiddle here

似乎有existing issue here 我想知道是否有人找到了任何替代方案。

我的javascript代码

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
    var address = '204 Deer Valley Rd, Lumsden No. 189, SK S0G';
    var map = new google.maps.Map(document.getElementById('map'), {

        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 16
    });

    var defaultStreetViewPanorama = map.getStreetView();

    var contentString = '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<div id="bodyContent">' +
        '<p><b>Uluru</b></p>' +
        '</div>' +
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var infowindowSV = new google.maps.InfoWindow({
        content: contentString
    });
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
            'address': address
        },
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(defaultStreetViewPanorama, marker);
                });

                map.setCenter(results[0].geometry.location);
            }
        });
}

2 个答案:

答案 0 :(得分:0)

我不知道这个问题。那里发布的代码根本不起作用,我不想调试它。

在街景全景中使用InfoWindow标记是没有问题的。

var map;

function initialize() {

  var panoPos = new google.maps.LatLng(31.2400896,121.4908558);
  var markerPos = new google.maps.LatLng(31.2400896,121.4909558);

  var panoOptions = {
    position: panoPos
  };

  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map-canvas'), panoOptions);

  var marker = new google.maps.Marker({
    position: markerPos,
    map: panorama
  });

  var infowindow = new google.maps.InfoWindow({
    content: 'hello world'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(panorama, marker);
  });

  panorama.setPov({
    heading: 90,
    pitch: 0,
    zoom: 0
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas {
  height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

答案 1 :(得分:0)

我明白了,我必须给Mr.Upsidown一些信任。我确实知道我可以在街景panarama选项中获取信息窗口,但它不是以旧的方式工作。事实证明,我们可以在街景中强制创建infowindow,它仍然可以打开和关闭其中的infowindow模式。

  google.maps.event.addListener(marker, 'click', function()       {
    new google.maps.InfoWindow({
    position: results[0].geometry.location,
    content: contentString
    }).open(map);
    new google.maps.InfoWindow({
    position: results[0].geometry.location,
    content: contentString
    }).open(map.getStreetView());
  });