0

我从以测试标记为中心的谷歌地图开始，点击它会切换到带有一组POV和ZOOM.

我希望能够捕捉和显示，Heading但我无法让事件侦听器触发。我添加了几行来显示街景启动时的设置。PitchZoompov_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(); 
});
4

1 回答 1

1

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

更新的小提琴

函数渲染映射（）{

   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); 
       }
   });
}
于 2013-05-30T15:48:18.283 回答