Плитки Google Maps StreetView изначально не загружаются в Firefox, только после перетаскивания
У меня проблема с Google View StreetView (в теме начальной загрузки, если это как-то связано с этим).
Я установил вид улиц видимым нажатием кнопки, и он работает в IE и Chrome, но в Firefox вид улиц остается серым (т. Е. Он не загружает исходные тайлы), пока вы не перетащите вид мышью.
Я создал скрипку об этом, попробуй себя и удивляйся:
У кого-нибудь есть догадки, почему это происходит?
РЕДАКТИРОВАТЬ: Теперь, когда я попробовал это в скрипке, плитки вообще не загружаются с Firefox, отлично загружается на Chrome. В моей реальной среде плитки загружаются в Firefox после первого перетаскивания вида.
РЕДАКТИРОВАТЬ 2: плитки не показывались вообще в скрипке, потому что я забыл добавить стили, чтобы исправить путаницу при загрузке с холстом карты 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>
2 ответа
Решение
Я понял это.
Он начал работать, когда я впервые добавил начальную позицию к виду на улицу.
Смотрите фиксированный код в скрипте:
<!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>
У меня такая же проблема.
Иногда StreetView работал, а иногда просто серый.
Это зависело от местоположения.
Позвольте мне прояснить решение...
Мой ненадежный код был таким:
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" были в начале и содержали позицию, которую я рассчитал.
Я изменил это, чтобы поместить 'PanoramaOptions' после вызова streetViewService.getPanoramaByLocation() и установить позицию в нем равным значению, возвращенному в 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(...)