Question

我从以测试标记为中心的 Google地图开始，然后点击它，使用 POV 设置切换到街景和 ZOOM 。

我希望能够捕捉并显示 Heading ， Pitch 和 Zoom 但我无法在 pov_changed 上触发事件监听器。我添加了几行来显示街景视图开始的设置。

我的代码：http://jsfiddle.net/chrisloughnane/Q2GZT/

我的方法基于来自Google API示例的http://quaystreet.chrisloughnane.net/index-view.html ....并且仍然不明白为什么我的听众不会解雇。

有人可以指出我做错了吗？

（除此之外，我最初尝试在Chrome控制台中获取POV设置，它只是报告了pano undefined等。是否可以在控制台中获取访问地图/街道视图变量？）

这是我的听众代码

google.maps.event.addListener(pano, 'pov_changed', function() { 
  document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
  document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
  document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
});

完整代码

$(document).ready(function() {

    function renderMap(){

        var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
        var myOptions = {
            zoom: 7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        var iconBase = 'http://quaystreet.chrisloughnane.net/images/';

        var markerPos = new google.maps.LatLng(53.270433, -9.054760999999985);

        var marker = new google.maps.Marker({
           position: markerPos,
           map: map,
           title: "Street Recal",
           icon: iconBase + 'camera_small.png'
        });
var pano = null;
        google.maps.event.addListener(marker, 'click', function() {
            map.setZoom(19);
            map.setCenter(marker.getPosition());
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), {
                navigationControl: false,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
                enableCloseButton: true,
                addressControl: false,
                linksControl: false,
                panControl: false,
                clickToGo: false,
                scrollwheel: true,
                draggable: false,
                pov: {
                        heading: 24.061926972355707,
                        pitch: 1.942235903158224,
                        zoom: 1.5
                }
            });
            pano.bindTo("position", marker);
            pano.setVisible(true);
            /* THIS IS PLACED HERE TO JUST SHOW SETTINGS CAN BE DISPLAY */
            document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
            document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
            document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
        });

        google.maps.event.addListener(map, 'zoom_changed', function() { 
        zoom = map.getZoom(); 
            if(zoom<15) { 
                map.setMapTypeId(google.maps.MapTypeId.ROADMAP); 
            } else {
                map.setMapTypeId(google.maps.MapTypeId.HYBRID); 
            }
        });
        /* THIS EVENT LISTENER */
        google.maps.event.addListener(pano, 'pov_changed', function() { 
            document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
            document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
            document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
        });
    }   
    renderMap(); 
});

Answer 1

将pano事件侦听器移动到定义它的代码中：

updated fiddle

function renderMap（）{

   var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
   var myOptions = {
       zoom: 7,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

   var iconBase = 'http://quaystreet.chrisloughnane.net/images/';

   var markerPos = new google.maps.LatLng(53.270433, -9.054760999999985);

   var marker = new google.maps.Marker({
      position: markerPos,
      map: map,
      title: "Street Recal",
      icon: iconBase + 'camera_small.png'
   });
   var pano = null;
   google.maps.event.addListener(marker, 'click', function() {
       map.setZoom(19);
       map.setCenter(marker.getPosition());
       map.setMapTypeId(google.maps.MapTypeId.HYBRID);
       pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), {
           navigationControl: false,
           navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
           enableCloseButton: true,
           addressControl: false,
           linksControl: false,
           panControl: false,
           clickToGo: false,
           scrollwheel: true,
           draggable: false,
           pov: {
                   heading: 24.061926972355707,
                   pitch: 1.942235903158224,
                   zoom: 1.5
           }
        });
       pano.bindTo("position", marker);
       pano.setVisible(true);
       /* THIS IS PLACED HERE TO JUST SHOW SETTINGS CAN BE DISPLAY */
       document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
       document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
       document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
       /* THIS EVENT LISTENER */
       google.maps.event.addListener(pano, 'pov_changed', function() { 
         document.getElementById('heading_cell').innerHTML = pano.getPov().heading + '';
         document.getElementById('pitch_cell').innerHTML = pano.getPov().pitch + '';
         document.getElementById('zoom_cell').innerHTML = pano.getPov().zoom + '';
       });
    });

    google.maps.event.addListener(map, 'zoom_changed', function() { 
       zoom = map.getZoom(); 
       if(zoom<15) { 
           map.setMapTypeId(google.maps.MapTypeId.ROADMAP); 
       } else {
           map.setMapTypeId(google.maps.MapTypeId.HYBRID); 
       }
   });
}

我在向Google街景添加EVENT监听器以获取POV设置时遇到问题？

1 个答案: