2

Googleマップのストリートビューに問題があります（ブートストラップテーマで、それが関係している場合）。

ボタンをクリックしてストリートビューを表示するように設定すると、IE と Chrome で問題なく動作しますが、Firefox では、ビューをマウスでドラッグするまで、ストリートビューは灰色のままです (つまり、最初のタイルが読み込まれません)。

私はそれについてフィドルを作成しました。自分で試してみて、驚いてください：

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

なぜこれが起こっているのか誰にも推測できますか？

編集: フィドルで試してみたところ、Firefox ではタイルがまったく読み込まれず、クロムでは正常に読み込まれます。私の実際の環境では、ビューを最初にドラッグした後、タイルも Firefox に読み込まれます。

EDIT2: Google マップ キャンバスをいじるブートストラップを修正するスタイルを追加するのを忘れていたため、タイルはフィドルにまったく表示されませんでした。「.map-canvas img」ルールを css に追加したところ、最初の問題が表示されるようになりました。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(...) の 3 番目のパラメーターの関数によって返されるパノラマの実際の位置を使用するのではなく、計算した位置にパノラマを強制的に表示しようとしたため、「グレー」が表示されていました。

于 2014-09-17T15:33:33.873 に答える