2

我对谷歌地图街景有疑问（在引导主题中，如果这与它有关）。

我通过单击按钮将街景设置为可见，它可以在 IE 和 Chrome 中运行，但在 Firefox 中，街景保持灰色（即它不加载初始图块），直到您用鼠标拖动视图。

我创造了一个关于它的小提琴，尝试你的自我并感到惊讶：

http://jsfiddle.net/wK5Hq/22/

任何人都猜到为什么会发生这种情况？

编辑：现在当我在小提琴中尝试它时，瓷砖根本没有用 Firefox 加载，在 chrome 上加载很好。在我的真实环境中，第一次拖动视图后，瓷砖也会在 Firefox 中加载。

EDIT2：因为我忘记添加样式来修复引导程序与谷歌地图画布的混乱，所以这些瓷砖根本没有显示在小提琴中。我在 CSS 中添加了“.map-canvas img”规则，现在它显示了最初的问题。在 Firefox 中拖动街景之前，瓷砖不会加载。更新了上面的小提琴链接。

这是小提琴的代码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Google maps streeview issue - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">



      <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>




      <script type='text/javascript' src="http://maps.google.com/maps/api/js?v=3.11&sensor=false&foo=.js"></script>


  <style type='text/css'>
    @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.map-canvas img {
    border: none !important;
    max-width: none !important;
}

.panorama-activated-map-canvas {
  width: 50%;
  float:left;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-bottom-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.panorama-activated-panorama-canvas {
  width: 50%;
  float:left;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-bottom-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.panorama-disabled-map-canvas {
  width: 100%;
  border-radius: 6px 6px 6px 6px;
}

.panorama-disabled-panorama-canvas {
  display: none;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var data = "{success:true, data:{\"schoolMarker\":{\"lat\":62.759379214514,\"lng\":22.840391666132},\"polylines\":[{\"path\":[{\"lat\":62.768091219265,\"lng\":22.841507465082},{\"lat\":62.767678823231,\"lng\":22.841421634393},{\"lat\":62.767168229676,\"lng\":22.841292888361},{\"lat\":62.766569252889,\"lng\":22.840928107935},{\"lat\":62.765842608979,\"lng\":22.840456039148},{\"lat\":62.76528288457,\"lng\":22.839919597345},{\"lat\":62.764772249527,\"lng\":22.839576274591},{\"lat\":62.764340166815,\"lng\":22.839533359247},{\"lat\":62.764016100627,\"lng\":22.839490443903},{\"lat\":62.763623288351,\"lng\":22.839554816919},{\"lat\":62.762660876165,\"lng\":22.839919597345},{\"lat\":62.761885031233,\"lng\":22.840220004755},{\"lat\":62.761020774875,\"lng\":22.840498954492},{\"lat\":62.760303815724,\"lng\":22.840820819574},{\"lat\":62.759655591079,\"lng\":22.841035396295},{\"lat\":62.759439513032,\"lng\":22.840541869836}]}]}}";
var map = null;
var schoolmarker = null;
var polyBounds = null;
var panorama = null;
var streetViewService = null;
var g = google.maps;
var response = eval( "(" + data + ")" );
if (response.success) {
    initMap('#map_canvas', '#panorama_canvas', response.data);
}
function initMap(mapSelector, panoramaSelector, data) {
    var mapOptions = {
      scrollwheel: false,
      zoom: 5,
      minZoom: 5,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeControlOptions: {
        mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE]
      },
      center: new g.LatLng(65.567, 25.303),
      mapTypeId: g.MapTypeId.ROADMAP,
      draggableCursor: 'auto',
      draggingCursor: 'move',
      disableDoubleClickZoom: true,
      scaleControl: true
    };
    map = new g.Map($(mapSelector).get(0), mapOptions);
    mapSelector = null;
    mapOptions = null;

    schoolmarker = new google.maps.Marker({
      animation: g.Animation.DROP,
      draggable: true,
      icon: 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/dancinghall.png',
      map: map,
      position: new g.LatLng(data.schoolMarker.lat, data.schoolMarker.lng)
    });

    polyBounds = new g.LatLngBounds();
    $.each(data.polylines, function(index, polyline) {
        var path = [];
        $.each(polyline.path, function(index, position) {
            var point = new g.LatLng(position.lat, position.lng);
            polyBounds.extend(point);
            path.push(point);
        });
        var polyLineObj = new g.Polyline({
            strokeColor: "#00BA03",
            strokeOpacity: 0.8,
            strokeWeight: 4,
            path: path,
            clickable: false
        });
        polyLineObj.setMap(map);
    });
    map.fitBounds(polyBounds);
    map.setCenter(schoolmarker.getPosition());

    panorama = new google.maps.StreetViewPanorama($(panoramaSelector).get(0));
    panorama.setVisible(false);
    streetViewService = new g.StreetViewService();
    map.setStreetView(panorama);
  }

$('#thebutton').click(function () {
    $('#map_canvas').removeClass('panorama-disabled-map-canvas').addClass('panorama-activated-map-canvas');
    $('#panorama_canvas').removeClass('panorama-disabled-panorama-canvas').addClass('panorama-activated-panorama-canvas');
    g.event.trigger(map, 'resize');
    map.fitBounds(polyBounds);
    map.setCenter(schoolmarker.getPosition());
    streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) {
        if (status == google.maps.StreetViewStatus.OK) {
            var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition());

            var panoOptions = {
                position: panoramaData.location.latLng,
                addressControl: false,
                linksControl: false,
                panControl: false,
                zoomControlOptions: {
                style: g.ZoomControlStyle.SMALL
            },
            pov: {
                heading: heading,
                pitch: 10,
                zoom: 2
            },
            enableCloseButton: false,
            visible:true
            };
            panorama.setOptions(panoOptions);
            g.event.trigger(panorama, 'resize');
        }
    });
});
});//]]>  

</script>


</head>
<body>
  <div class="container">
    <div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a></div>        
  <div id="mapcontainer" class="container" style="position: relative">
    <div class="container hero-unit" style="padding:0;">
                <div class="map-canvas panorama-disabled-map-canvas" id="map_canvas" style="height: 480px;"></div>
        <div class="map-canvas panorama-disabled-panorama-canvas" id="panorama_canvas" style="height: 480px;"></div>
    </div>      
  </div>
  <div id="bottomcontainer" style="">        

  </div>      
  <div id="log"></div>    
</div>

</body>


</html>
4

2 回答 2

3

我解决了。

当我第一次创建街景时，它开始工作。

请参阅小提琴中的固定代码：

http://jsfiddle.net/wK5Hq/23/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Google maps streeview issue - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">



      <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>




      <script type='text/javascript' src="http://maps.google.com/maps/api/js?v=3.11&sensor=false&foo=.js"></script>


  <style type='text/css'>
    @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.map-canvas img {
    border: none !important;
    max-width: none !important;
}

.panorama-activated-map-canvas {
  width: 50%;
  float:left;
  -webkit-border-top-left-radius: 6px;
  -moz-border-top-left-radius: 6px;
  border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-bottom-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.panorama-activated-panorama-canvas {
  width: 50%;
  float:left;
  -webkit-border-top-right-radius: 6px;
  -moz-border-top-right-radius: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-bottom-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.panorama-disabled-map-canvas {
  width: 100%;
  border-radius: 6px 6px 6px 6px;
}

.panorama-disabled-panorama-canvas {
  display: none;
}
  </style>



<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var data = "{success:true, data:{\"schoolMarker\":{\"lat\":62.759379214514,\"lng\":22.840391666132},\"polylines\":[{\"path\":[{\"lat\":62.768091219265,\"lng\":22.841507465082},{\"lat\":62.767678823231,\"lng\":22.841421634393},{\"lat\":62.767168229676,\"lng\":22.841292888361},{\"lat\":62.766569252889,\"lng\":22.840928107935},{\"lat\":62.765842608979,\"lng\":22.840456039148},{\"lat\":62.76528288457,\"lng\":22.839919597345},{\"lat\":62.764772249527,\"lng\":22.839576274591},{\"lat\":62.764340166815,\"lng\":22.839533359247},{\"lat\":62.764016100627,\"lng\":22.839490443903},{\"lat\":62.763623288351,\"lng\":22.839554816919},{\"lat\":62.762660876165,\"lng\":22.839919597345},{\"lat\":62.761885031233,\"lng\":22.840220004755},{\"lat\":62.761020774875,\"lng\":22.840498954492},{\"lat\":62.760303815724,\"lng\":22.840820819574},{\"lat\":62.759655591079,\"lng\":22.841035396295},{\"lat\":62.759439513032,\"lng\":22.840541869836}]}]}}";
var map = null;
var schoolmarker = null;
var polyBounds = null;
var panorama = null;
var streetViewService = null;
var g = google.maps;
var response = eval( "(" + data + ")" );
if (response.success) {
    initMap('#map_canvas', '#panorama_canvas', response.data);
}
function initMap(mapSelector, panoramaSelector, data) {
    var mapOptions = {
      scrollwheel: false,
      zoom: 5,
      minZoom: 5,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeControlOptions: {
        mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE]
      },
      center: new g.LatLng(65.567, 25.303),
      mapTypeId: g.MapTypeId.ROADMAP,
      draggableCursor: 'auto',
      draggingCursor: 'move',
      disableDoubleClickZoom: true,
      scaleControl: true
    };
    map = new g.Map($(mapSelector).get(0), mapOptions);
    mapSelector = null;
    mapOptions = null;

    schoolmarker = new google.maps.Marker({
      animation: g.Animation.DROP,
      draggable: true,
      icon: 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/dancinghall.png',
      map: map,
      position: new g.LatLng(data.schoolMarker.lat, data.schoolMarker.lng)
    });

    polyBounds = new g.LatLngBounds();
    $.each(data.polylines, function(index, polyline) {
        var path = [];
        $.each(polyline.path, function(index, position) {
            var point = new g.LatLng(position.lat, position.lng);
            polyBounds.extend(point);
            path.push(point);
        });
        var polyLineObj = new g.Polyline({
            strokeColor: "#00BA03",
            strokeOpacity: 0.8,
            strokeWeight: 4,
            path: path,
            clickable: false
        });
        polyLineObj.setMap(map);
    });
    map.fitBounds(polyBounds);
    map.setCenter(schoolmarker.getPosition());

    streetViewService = new g.StreetViewService();
    streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) {
        if (status == google.maps.StreetViewStatus.OK) {
            var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition());

            var panoOptions = {
                position: panoramaData.location.latLng,
                addressControl: false,
                linksControl: false,
                panControl: false,
                zoomControlOptions: {
                style: g.ZoomControlStyle.SMALL
            },
            pov: {
                heading: heading,
                pitch: 10,
                zoom: 2
            },
            enableCloseButton: false,
            visible:false
            };
            panorama = new google.maps.StreetViewPanorama($(panoramaSelector).get(0), panoOptions);
        }
    });
    map.setStreetView(panorama);
  }

$('#thebutton').click(function () {
    $('#map_canvas').removeClass('panorama-disabled-map-canvas').addClass('panorama-activated-map-canvas');
    $('#panorama_canvas').removeClass('panorama-disabled-panorama-canvas').addClass('panorama-activated-panorama-canvas');
    g.event.trigger(map, 'resize');
    map.fitBounds(polyBounds);
    map.setCenter(schoolmarker.getPosition());
    streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) {
        if (status == google.maps.StreetViewStatus.OK) {
            var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition());

            var panoOptions = {
                position: panoramaData.location.latLng,
                addressControl: false,
                linksControl: false,
                panControl: false,
                zoomControlOptions: {
                style: g.ZoomControlStyle.SMALL
            },
            pov: {
                heading: heading,
                pitch: 10,
                zoom: 2
            },
            enableCloseButton: false,
            visible:true
            };
            panorama.setOptions(panoOptions);
            g.event.trigger(panorama, 'resize');
        }
    });
});
});//]]>

</script>


</head>
<body>
  <div class="container">
    <div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a></div>
  <div id="mapcontainer" class="container" style="position: relative">
    <div class="container hero-unit" style="padding:0;">
                <div class="map-canvas panorama-disabled-map-canvas" id="map_canvas" style="height: 480px;"></div>
        <div class="map-canvas panorama-disabled-panorama-canvas" id="panorama_canvas" style="height: 480px;"></div>
    </div>
  </div>
  <div id="bottomcontainer" style="">

  </div>
  <div id="log"></div>
</div>

</body>


</html>
于 2013-02-27T15:57:17.743 回答
0

我有同样的问题。

有时街景可以工作，而在其他时候它只是显示为灰色。

这取决于位置。

让我澄清一下解决方案...

我不可靠的代码是这样的：

function showStreetView(lat, lng)
{
    var pos = new google.maps.LatLng(lat, lng);

    var panoramaOptions =
    {
        position: pos,
        pov: {
            heading: 0,
            pitch: 0
        }
    };

    var streetViewService = new google.maps.StreetViewService();

    var STREETVIEW_MAX_DISTANCE = 100;

    streetViewService.getPanoramaByLocation(pos, STREETVIEW_MAX_DISTANCE, function(streetViewPanoramaData, status)
    {
        if (status === google.maps.StreetViewStatus.OK)
        {
            var panorama = new google.maps.StreetViewPanorama(document.getElementById('streetView'), panoramaOptions);

            map.setStreetView(panorama);
        }
        else
        {
            // no street view available in this range, or some error occurred
            map.getStreetView().setVisible(false);
        }
    });
}

...也就是说，'panoramaOptions' 接近开头并包含我计算的位置。

我将其更改为在调用 streetViewService.getPanoramaByLocation() 之后放置“panoramaOptions”，并将其中的位置设置为“streetViewPanoramaData.location.latLng”中返回的值，即全景图的实际位置，而不是我计算的位置。然后它起作用了。

更新后的代码如下所示：

function showStreetView(lat, lng)
{
    var pos = new google.maps.LatLng(lat, lng);

/*  var panoramaOptions =
    {
        position: pos,
        pov: {
            heading: 0,
            pitch: 0
        }
    };
*/
    var streetViewService = new google.maps.StreetViewService();

    var STREETVIEW_MAX_DISTANCE = 100;

    streetViewService.getPanoramaByLocation(pos, STREETVIEW_MAX_DISTANCE, function(streetViewPanoramaData, status)
    {
        if (status === google.maps.StreetViewStatus.OK)
        {
            var panoramaOptions =
            {
                position: streetViewPanoramaData.location.latLng,  // here is the important change !!!!
                pov: {
                    heading: 0,
                    pitch: 0
                }
            };

            var panorama = new google.maps.StreetViewPanorama(document.getElementById('streetView'), panoramaOptions);

            map.setStreetView(panorama);
        }
        else
        {
            // no street view available in this range, or some error occurred
            map.getStreetView().setVisible(false);
        }
    });
}

所以它显示“灰色”，因为我试图强制它在我计算的位置显示全景图，而不是使用 getPanoramaByLocation(...) 的第三个参数中的函数返回的全景图的实际位置

于 2014-09-17T15:33:33.873 回答