Question

我遇到了这个很棒的小脚本，用于通过stackoverflow在bootstrap选项卡中加载gmap。

我尝试进行必要的更改以尝试将街景视图发送到另一个标签页，但我得到的只是一个空白。任何鞋底都有帮助。

这是我的gmap代码（用于地图）

var map;

jQuery(function($) {
$(document).ready(function() {
    var latlng = new google.maps.LatLng(-16.920728, 145.769219);
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    console.dir(map);
    google.maps.event.trigger(map, 'resize');

    $('a[href="#themap"]').on('shown', function(e) {
        google.maps.event.trigger(map, 'resize');
    });

    $('#myTab a[href="#themap"]').on('shown', function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng);
    });
    var contentString = '<div id="iw_content">'+
                            '<h4>16/63 Mcleod Street , Cairns City</h4>'+
                            '<div class="iw_content_block">QLD 4870</div>'+
                            '<div class="iw_content_block">More listings from <a href="/agent/leona-bonsey-14/">Leona Bonsey</a></div>'
                        '</div>';
    var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });
    var iconBase = '/public/images/';
                        var myShadow = {
                          url: iconBase + 'shadow.png',
                          anchor: new google.maps.Point(16, 34)
    };
    var marker = new google.maps.Marker({
                            map: map,
                            animation: google.maps.Animation.DROP,
                            icon: iconBase + '422marker.png',
                            shadow: myShadow,
                            position: latlng,
                            title: "16/63 Mcleod Street, Cairns City, QLD, 4870"
    });
    google.maps.event.addListener(marker, 'click', function() {
                          infowindow.open(map,marker);
                        });
});
});

可以在此处看到演示http://www.422.com.au/property/apartment-qld-cairns+city-15032013172546

这就是我对街景地图的看法（不成功地加载街景）

function initialize() {

var latlng = new google.maps.LatLng(-16.920728, 145.769219);
  var panoramaOptions = {
    position: latlng,
    pov: {
      heading: 165,
      pitch: 0
    },
    zoom: 1
  };
  var myPano = new google.maps.StreetViewPanorama(
      document.getElementById('street_canvas'),
      panoramaOptions);
  myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);

感谢任何帮助。

Answer 1

让它工作的诀窍是等待实际初始化地图，直到显示选项卡。不是在窗口加载时初始化地图，而是在街景地图选项卡的on（'shown'）内调用initialize。

看看这个小提琴：

var map;

$(document).ready(function() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    $('a[href="#map"]').on('shown', function(e) {
        google.maps.event.trigger(map, 'resize');
    });
    $('a[href="#street"]').on('shown', function(e) {
        initialize(); //Call initialize here!
    });

});

function initialize() {
  var latlng = new google.maps.LatLng(-16.920728, 145.769219);
  var panoramaOptions = {
    position: latlng,
    pov: {
      heading: 165,
      pitch: 0
    },
    zoom : 1
  };
  var myPano = new google.maps.StreetViewPanorama(
    document.getElementById('street_canvas'),
    panoramaOptions
  );
  myPano.setVisible(true);
}

http://jsfiddle.net/B4zLe/167/

Bootstrap标签 - 街景

1 个答案: