Fatal编程技术网
  • google-maps-api-3/
  • Google maps api 3 I'；我在谷歌街景中添加事件监听器以获取POV设置时遇到问题？

Google maps api 3 I'；我在谷歌街景中添加事件监听器以获取POV设置时遇到问题？

google-maps-api-3

Google maps api 3 I'；我在谷歌街景中添加事件监听器以获取POV设置时遇到问题？,google-maps-api-3,event-handling,google-street-view,Google Maps Api 3,Event Handling,Google Street View,我从以测试标记为中心的谷歌地图开始，点击它切换到街景，设置POV和缩放 我希望能够捕捉并显示标题，音高和缩放，但我无法让事件侦听器启动pov\u更改。我添加了几行来显示街景开始时的设置 我的代码： 我的方法基于一个GoogleAPI示例。。。。我还是不明白为什么我的听众不会开火 有人能指出我做错了什么吗？ （除此之外，我最初尝试在Chrome控制台中获取POV设置，它只是报告了pano未定义等。是否可以在控制台中获取访问地图/街景变量？） 这是我为听众编写的代码 google.maps.even

我从以测试标记为中心的谷歌地图开始，点击它切换到街景，设置
POV
和
缩放

我希望能够捕捉并显示
标题
，
音高
和
缩放
，但我无法让事件侦听器启动
pov\u更改
。我添加了几行来显示街景开始时的设置

我的代码：

我的方法基于一个GoogleAPI示例。。。。我还是不明白为什么我的听众不会开火

有人能指出我做错了什么吗？

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

这是我为听众编写的代码

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(); 
});

$（文档）.ready（函数（）{
函数renderMap（）{
var mylatng=new google.maps.LatLng（53.270433，-9.054760999985）；
变量myOptions={
缩放：7，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“地图画布”），myOptions）；
iconBase变量http://quaystreet.chrisloughnane.net/images/';
var markerPos=new google.maps.LatLng（53.270433，-9.054760999985）；
var marker=new google.maps.marker({
职位：markerPos，
地图：地图，
标题：“街道重建”，
图标：iconBase+“camera\u small.png”
});
var-pano=null；
google.maps.event.addListener（标记'click'，函数（）{
map.setZoom（19）；
map.setCenter（marker.getPosition（））；
setMapTypeId（google.maps.MapTypeId.HYBRID）；
pano=新的google.maps.StreetViewPanorama（document.getElementById（“地图画布”）{
导航控制：错误，
navigationControlOptions:{style:google.maps.NavigationControlStyle.ANDROID}，
enableCloseButton:true，
地址控制：false，
链接控件：false，
泛控制：错误，
单击多哥：false，
滚轮：对，
可拖动：错误，
pov：{
标题：24.061926972355707，
螺距：1.942235903158224，
缩放：1.5
}
});
全景绑定到（“位置”，标记）；
全景设置可见（真）；
/*这是放置在这里只是显示设置可以显示*/
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（映射'zoom_changed'，函数（）{
zoom=map.getZoom（）；

如果（缩放将pano事件侦听器移动到定义它的代码中：



函数renderMap（）{


var mylatng=new google.maps.LatLng（53.270433，-9.0547609999985）；
变量myOptions={
缩放：7，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“地图画布”），myOptions）；
iconBase变量http://quaystreet.chrisloughnane.net/images/';
var markerPos=new google.maps.LatLng（53.270433，-9.054760999985）；
var marker=new google.maps.marker({
职位：markerPos，
地图：地图，
标题：“街道重建”，
图标：iconBase+“camera\u small.png”
});
var-pano=null；
google.maps.event.addListener（标记'click'，函数（）{
map.setZoom（19）；
map.setCenter（marker.getPosition（））；
setMapTypeId（google.maps.MapTypeId.HYBRID）；
pano=新的google.maps.StreetViewPanorama（document.getElementById（“地图画布”）{
导航控制：错误，
navigationControlOptions:{style:google.maps.NavigationControlStyle.ANDROID}，
enableCloseButton:true，
地址控制：false，
链接控件：false，
泛控制：错误，
单击多哥：false，
滚轮：对，
可拖动：错误，
pov：{
标题：24.061926972355707，
螺距：1.942235903158224，
缩放：1.5
}
});
全景绑定到（“位置”，标记）；
全景设置可见（真）；
/*这是放置在这里只是显示设置可以显示*/
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（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（映射'zoom_changed'，函数（）{
zoom=map.getZoom（）；

如果（zoomDoes）有帮助吗？嗨@geocodezip，恐怕没有。我昨晚在谷歌拖网上找到了你的作品。似乎我无法将事件绑定到pano
pov_changed
，因为在我单击标记之前它不存在。我想我必须重写以模拟你的解决方案。尽管我仍然想知道为什么我无法在代码中绑定事件。哈哈

   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); 
       }
   });
}