Кнопка InfoBox для переключения в режим просмотра улиц

Question

У меня есть кнопка в инфобоксе. Я хочу, чтобы эта кнопка переключилась в режим просмотра улиц. Кнопка срабатывает и переключается в режим просмотра улиц, однако мой код ниже рассматривает просмотр улиц как полностью отдельную сущность для моей карты Google, что означает, что я не могу уменьшить масштаб до вида карты, и на уровне просмотра улиц нет видимого маркера:

        var fenway = new google.maps.LatLng(this.marker[id].position.jb,this.marker[id].position.kb);

    var panoramaOptions = {
        position: fenway,
        pov: {
            heading: 34,
            pitch: 10
        }
    };

    var panorama = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), panoramaOptions);
    this.gmap.setStreetView(panorama);

Как мне изменить это так, чтобы просмотр улиц активировался на текущей карте, а не создавался полностью отдельный экземпляр?

Answer 1

Это сработало для меня:

    var streetViewMaxDistance = 100;          

    var point = new google.maps.LatLng(this.marker[id].position.jb,this.marker[id].position.kb);
    var streetViewService = new google.maps.StreetViewService();
    var panorama = this.gmap.getStreetView();

    streetViewService.getPanoramaByLocation(point, streetViewMaxDistance, function (streetViewPanoramaData, status) {

        if(status === google.maps.StreetViewStatus.OK){

            var oldPoint = point;
            point = streetViewPanoramaData.location.latLng;

            var heading = google.maps.geometry.spherical.computeHeading(point,oldPoint);            

            panorama.setPosition(point);
            panorama.setPov({
                heading: heading,
                zoom: 1,
                pitch: 0
            });
            panorama.setVisible(true);

        }else{
            // no street view available in this range, or some error occurred
            console.log("Sorry! Street View is not available.");
        }
    });

Answer 2

Надеюсь, это также может быть полезно. Чтобы интегрировать это с моей существующей картой, где:

map мой экземпляр класса Google Map map = new google.maps.Map(el,mapOptions)

pointer мой экземплярный маркер:

    pointer = new google.maps.Marker({
        position: latLng,
        map: map
    });

И latLng - это: latLng = new google.maps.LatLng(lat, lng)

Все, что мне нужно было сделать, это добавить следующий код ниже всего остального, который прослушивает щелчок по моему маркеру, когда он щелкает, он делает вид улицы видимым.

    var panorama = map.getStreetView();
    panorama.setPosition(latLng);
    panorama.setPov({
        heading: 45,
        pitch:-10}
    );

    google.maps.event.addListener(pointer, 'click', function() {
        panorama.setVisible(true);
    });

Answer 3

Использование нулевого значения для параметра метода setStreetView свяжет встроенный вид улицы с текущей картой (завершается знаком X, чтобы закрыть вид улицы и вернуться к карте).

this.gmap.setStreetView();

От: https://developers.google.com/maps/documentation/javascript/reference?csw=1

Связывает StreetViewPanorama с картой. Эта панорама переопределяет StreetViewPanorama по умолчанию, позволяя карте привязываться к внешней панораме вне карты. Установка нулевой панорамы привязывает встроенную панораму по умолчанию обратно к карте.

Редактировать: если у вас есть несколько информационных окон, вам может понадобиться использовать функцию, подобную этой, чтобы обновить streeview с позицией маркера:

function streetview(location) {

    location = location.replace('(', '').replace(')', '');
    var lat = location.split(',')[0];
    var lng = location.split(',')[1];
    var latlng = new google.maps.LatLng(lat, lng);
    this.gmap.setStreetView();
    this.gmap.getStreetView().setPosition(latlng);
}