Google MapsV3 StreetView проблема - не работает, если просмотр улиц недоступен - PullRequest
Новая
       26

Google MapsV3 StreetView проблема - не работает, если просмотр улиц недоступен

1 голос
/ 09 мая 2011

У нас есть стандартная карта (MapTypeId.ROADMAP) с маркером на ней.Над картой находится кнопка с надписью «Показать StreetView».Если пользователь щелкает по нему, он загружает StreetView в позицию маркера (в том же элементе div).Кнопка изменится на «Скрыть StreetView», и при нажатии карта вернется к стандартной ROADMAP.Пользователи также могут использовать «pegman» для имитации того же самого bahviour, очевидно.

Проблема началась, когда в позиции маркера не было фактического вида улицы.Мы обрабатывали это с помощью прослушивателя событий, если не было доступного просмотра улиц, отображается сообщение, информирующее пользователя, и возвращается значение false, чтобы предотвратить «показ» несуществующего просмотра улиц.Работал отлично, за исключением случаев, когда пользователь пытался использовать «pegman» - потому что мы уже загрузили (но не отобразили) вид улицы (которого там не было).Когда пользователь впервые уронил пегмана на карту, ничего не произошло, но наша кнопка «Показать / Скрыть» изменилась.Во второй капле pegman он изменился на просмотр улиц, но наша кнопка «показать / скрыть» теперь не работает (она отображала «просмотр улиц», когда она уже была, и «скрыть вид улиц» в ROADMAP.

Мы попытались изменить нашу структуру кода - просмотр улиц (var Panorama = ...) инициализируется только через функцию javascript «onclick» (изначально она была связана с функцией loadMap, теперь она разделена с другой функцией).) на нашей кнопке «показать / скрыть» - если доступно представление улиц, измените его и измените кнопку, если нет, верните false и отобразите сообщение пользователю. Это прекрасно работает, но теперь, если пользователь использует «pegman», чтобы перейти к просмотру улиц,кнопки не меняются, потому что они были разделены на другую функцию.

Я нахожусь в своем уме, три дня пробую всевозможные варианты, и я не могу понять, как прослушивать функцию loadMap для 'изменить вид на улицу с помощью Pegman Drop' ( см. прослушиватель событий visible_changed в tон загружает код ниже ) - Если я могу это выяснить, я могу изменить отображение кнопок, но для жизни я не могу понять это (исследовал мутации DOM, чтобы прослушать отображение улиц, но не очень) кросс-браузердружественный, что важно, так как сайт получает более 4 миллионов посещений в месяц).

Вот функция loadMap 

function loadGMap(lat, lng, nachladenAnzeigen, radialConflict){
// Create the Map variables 
 mapDiv = document.getElementById('map');
 width = parseInt(mapDiv.style.width);
 height = parseInt(mapDiv.style.height);
 latlng = new google.maps.LatLng(lat, lng);

// Create Map
var mapOptions = {
  zoom: 14,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false,
  panControl: false
};
map = new google.maps.Map(mapDiv,mapOptions);


... Code here for laying marker to map...

google.maps.event.addListener(map, 'visible_changed', function(){
        alert('please work');
                    // It doesn't - no alert when pegman is dropped :-(
}

// Check for a street view at the marker position
var streetViewCheck = new google.maps.StreetViewService();  
streetViewCheck.getPanoramaByLocation(latlng, 50, function(result, status) {
    if (status == google.maps.StreetViewStatus.ZERO_RESULTS) {
        streetViewAvailable = 0;        
    }else{
        streetViewAvailable = 1;
    }
});
... more code (event listeners, ie, zoom changed, etc...

И это функция loadStreetView, которая вызывается черезДействие «onclick» на кнопке «Показать / скрыть просмотр улиц» над картой (не то, чтобы я думаю, что вам это понадобится, все отлично работает для этого варианта использования, это чертово падение Пегмана, которое не работает, но вы никогда не знаете...) 

function loadStreetView(){
// Make 'Show/Hide StreetView' links above the map work     
    // Handle the toggle of StreetView 'button' display
    if(streetViewAvailable == 0){
        noStreetViewVariable = document.getElementById('noStreetView');
        noStreetViewVariable.style.display = "inline";
        return false;
    }else{ 
        panorama = map.getStreetView();
        panorama.setPosition(latlng);
        panorama.setPov({
            heading: 265,
            zoom:1,
            pitch:0
        });

        var toggle = panorama.getVisible();
        if (toggle == false) {
            panorama.setVisible(true);
            $('#button_streetview').attr("src", 'img/buttons/mapview.png');
        } else {
            panorama.setVisible(false);
            $('#button_streetview').attr("src", 'img/buttons/streetview.png');
        }
    }

    google.maps.event.addListener(panorama, 'visible_changed', function(){
        if(streetViewAvailable == 0){
            $('#button_streetview').attr("src", 'img/buttons/mapview.png');
        }
        else if(streetViewAvailable == 1){
            if (panorama.getVisible() == true ) {

                $('#button_streetview').attr("src", 'img/buttons/mapview.png');
            }
        }
    });

    google.maps.event.addListener(panorama, 'closeclick', function() {
        $('#button_streetview').attr("src", 'img/buttons/streetview.png');
    });
}

1 Ответ

2 голосов
/ 16 июня 2011

Ваш прослушиватель событий для visible_changed находится на объекте карты, а не на панораме.Объект Map (v3) не имеет события visible_changed.

Мое решение (которое работает для меня ..) таково: 

var pano = null ; // on initialize  I use this in the global scope, bad, I know... <br>
var map = null ; // likewise <br>

function init(); <br>
    map = new google.maps.Map(document.getElementById('map'),
        MapOptions ); <br>
    createPano() ; <br>
    ... other init stuff here .. <br>
}

function createPano() { <br>
    if ( pano == null ) { <br>
    pano = map.getStreetView();  //  the api says this creates the default pano object..
<br>    }

&nbsp;          google.maps.event.addListener(pano, "visible_changed",
        function(){ <br>
        alert("position is " + pano.getPosition() ) ; <br>
        // change this to getPanoAndSwitch() when custom panos are available ..
<br>        panoFlag = pano.getVisible();

...
      rest of code here.

По крайней мере, так оно и выглядит для меня.

...