谷歌地图街景瓷砖最初不会在Firefox中加载，只能在拖动之后加载 [英] Google maps streetview tiles do not load in Firefox initially, only after dragging
本文介绍了谷歌地图街景瓷砖最初不会在Firefox中加载，只能在拖动之后加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在谷歌地图streetview中遇到问题（在引导主题中，如果这与它有关）。
我通过点击设置街景的按钮，它可以在IE和Chrome中正常工作，但在Firefox中，街景视图保持灰色（即不会加载初始图块），直到您用鼠标拖动视图。
我创作了一个小提琴，尝试一下你的自我并感到惊讶：
有人猜测为什么会发生这种情况？ / p>
编辑：现在，当我在小提琴中尝试它时，根本无法使用Firefox加载拼贴，在Chrome上加载得很好。在我的真实环境中，第一次拖动视图后，也会在Firefox中加载图块。
编辑2：由于我忘记了，添加样式来解决引导与谷歌地图画布混乱。我在CSS中添加了.map-canvas img规则，现在它显示了最初的问题。瓷砖不会加载，直到在Firefox中拖动街景。
以下是小提琴的代码
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< title> Google地图streeview问题 - jsFiddle演示< / title>
< script type ='text / javascript'src ='http：//code.jquery.com/jquery-1.8.3.js'>< / script>
< link rel =stylesheettype =text / csshref =/ css / normalize.css>
< link rel =stylesheettype =text / csshref =/ css / result-light.css>
< script type ='text / javascript'src =http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0 /bootstrap.min.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;
最大宽度：无！重要;
}
.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-right-right-radius：6px;
-moz-border-top-right-radius：6px;
border-right-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）;
}
函数initMap（mapSelector，panoramaSelector，data）{
var mapOptions = {
滚动轮：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（{
动画：g.Animation.DROP，
可拖动：true，
图标：'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）;
$ b $（'＃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（））;
如果（status == google.maps.StreetViewStatus.OK）{
var heading = g.geometry.spherical。 computeHeading（panoramaData.location.latLng，schoolmarker.getPosition（））;
var panoOptions = {
位置：panoramaData.location.latLng，
addressControl：false，
linksControl：false，
panControl：false，
zoomControlOptions：{
style：g.ZoomControlStyle.SMALL
}，
pov：{
heading：标题，
pitch：10，
zoom：2
}，
enableCloseButton：false，
visible：true
};
panorama.setOptions（panoOptions）;
g.event.trigger（全景图，'resize'）;
}
}）;
}）;
}）; //]]>
< / script>
< / head>
< body>
< div class =container>
< div class =containerid =infocontainerstyle =>< a href =＃class =btn btn-primaryid =thebuttononclick =return false; >点击此处< / a>< / div>
< div id =mapcontainerclass =containerstyle =position：relative>
< div class =container hero-unitstyle =padding：0;>
< div class =map-canvas panorama-disabled-map-canvasid =map_canvasstyle =height：480px;>< / div>
< div class =map-canvas panorama-disabled-panorama-canvasid =panorama_canvasstyle =height：480px;>< / div>
< / div>
< / div>
< div id =bottomcontainerstyle =>
< / div>
< div id =log>< / div>
< / div>
< / body>
< / html>
解决方案
我解决了问题。
$ b
当我第一次创建街景时，它已经开始工作了。
参见小提琴中的固定代码：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< title> Google地图streeview问题 - jsFiddle演示< / title>
< script type ='text / javascript'src ='http：//code.jquery.com/jquery-1.8.3.js'>< / script>
< link rel =stylesheettype =text / csshref =/ css / normalize.css>
< link rel =stylesheettype =text / csshref =/ css / result-light.css>
< script type ='text / javascript'src =http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0 /bootstrap.min.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;
最大宽度：无！重要;
}
.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-right-right-radius：6px;
-moz-border-top-right-radius：6px;
border-right-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}，{\升at\ ：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）;
}
函数initMap（mapSelector，panoramaSelector，data）{
var mapOptions = {
滚动轮：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（{
动画：g.Animation.DROP，
可拖动：true，
图标：'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 = {
位置：panoramaData.location.latLng，
addressControl：false ，
linksControl：false，
panControl：false，
zoomControlOptions：{
style：g.ZoomControlStyle.SMALL
}，
pov：{
标题：标题，
pitch：10，
zoom：2
}，
enableCloseButton：false，
visible：false
};
panorama = new google.maps.StreetViewPanorama（$（panoramaSelector）.get（0），panoOptions）;
}
}）;
map.setStreetView（panorama）;
$ b $（'＃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（））;
如果（status == google.maps.StreetViewStatus.OK）{
var heading = g.geometry.spherical。 computeHeading（panoramaData.location.latLng，schoolmarker.getPosition（））;
var panoOptions = {
位置：panoramaData.location.latLng，
addressControl：false，
linksControl：false，
panControl：false，
zoomControlOptions：{
style：g.ZoomControlStyle.SMALL
}，
pov：{
heading：标题，
pitch：10，
zoom：2
}，
enableCloseButton：false，
visible：true
};
panorama.setOptions（panoOptions）;
g.event.trigger（全景图，'resize'）;
}
}）;
}）;
}）; //]]>
< / script>
< / head>
< body>
< div class =container>
< div class =containerid =infocontainerstyle =>< a href =＃class =btn btn-primaryid =thebuttononclick =return false; >点击此处< / a>< / div>
< div id =mapcontainerclass =containerstyle =position：relative>
< div class =container hero-unitstyle =padding：0;>
< div class =map-canvas panorama-disabled-map-canvasid =map_canvasstyle =height：480px;>< / div>
< div class =map-canvas panorama-disabled-panorama-canvasid =panorama_canvasstyle =height：480px;>< / div>
< / div>
< / div>
< div id =bottomcontainerstyle =>
< / div>
< div id =log>< / div>
< / div>
< / body>
< / html>
I have a problem with google maps streetview (in a bootstrap theme, if that has something to do with it).
I set the streetview visible with a click of a button and it works in IE and Chrome ok, but in Firefox, the streetview stays gray (ie. it doesn't load the initial tiles) until you drag the view with a mouse.
I created a fiddle about it, try your self and be amazed:
Anyone have a guess why is this happening?
EDIT: Now when I tried it in the fiddle, the tiles are not loading at all with Firefox, loads fine on chrome. In my real environment, the tiles load in Firefox too after first drag of the view.
EDIT2: The tiles didn't show at all in the fiddle because I had forgot to add the styles to fix bootstrap messing with the google map canvas. I added ".map-canvas img" rule to the css and now it shows the initial problem. Tiles wont load until street view is dragged in Firefox. Updated the fiddle link above.
Here's the code from the fiddle
<!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>
解决方案
I got it resolved.
It started to work when I added initial position to the street view when creating it for the first time.
See fixed code in fiddle:
<!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>
这篇关于谷歌地图街景瓷砖最初不会在Firefox中加载，只能在拖动之后加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
