I have a Street View-map of my campus area. I can navigate around the areas with the links created with getCustomLinks fine. But I have been stuck with this for a while now: is there a way to change between custom street view panoramas via a select component? I want to be able to navigate around the campus area with the arrows, but also to be able to jump to any panorama in the select-component. The arrows work perfectly. So far I have managed to change the panoramas

My select-box

 <select onChange="onChange()" id="hamk_select" width="1000px">
  <option value="b_talo_piha">HAMK Visam&auml;ki</option>
  <option value="kirjasto">Kirjasto</option>
  <option value="c_talo_auditorio">Auditorio</option>
  </select>

onChange()-function

function test(){
    d = document.getElementById("hamk_select").value;

    var  panoOptions = {        
      pano: d,
      visible: true,         
      panoProvider:  getCustomPanorama,
      scrollwheel: true,
      enableCloseButton: false,
      centerHeading: 270,
      disableDoubleClickZoom: true,
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
    },

      pov: {
        heading: 130,
        pitch: 0
      },

      clickToGo: false,
      imageDateControl: false,
      panControl: false


    };


panorama = new  google.maps.StreetViewPanorama(document.getElementById('map_canvas'),panoOptions);

Now I am stuck with creating the correct links. In the initialization method, similar to the example at the documentation a eventListener is added to the 'links_changed' event and 'result.location.pano' is used to create links.

    streetviewService = new google.maps.StreetViewService();

    var radius = 50;
    streetviewService.getPanoramaByLocation(THE_ENTRY_LOCATION, radius,
        function(result, status) {
      if (status == google.maps.StreetViewStatus.OK) {

        google.maps.event.addListener(panorama, 'links_changed',
          function() {
            createCustomLinks(result.location.pano);
          });
      }
    });

I think I should use get StreetViewService's getPanoramaById-method instead of getPanoramaByLocation. I have tried this but the GET fails (status = UNKNOWN_ERROR, JavaScript console says: 404 Not Found in the header, so obviously something isn't working.)

    streetviewService.getPanoramaById(panorama.getPano(),
        function(result, status) {
      if (status == google.maps.StreetViewStatus.OK) {

            createCustomLinks(result.location.pano);

      }
    });

Calling just createCustomLinks(d) doesn't help either, as var links is not defined. Any ideas how to correctly do this?

有帮助吗?

解决方案

Solution was ridiculously simple: only change the pano value and use that as the panorama.setOptions value to trigged the original "links_changed" event.

function onChange(){

    d = document.getElementById("hamk_select").value;

    var  panoOptions =
     {      
      pano: d,        
     };   

    panorama.setOptions(panoOptions);


  }
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top