Google地图调整大小css显示无 [英] Google Maps resize css display none
问题描述
这个问题在这里被多次提出,这就是说Google地图会部分显示。我的问题是:我使用航点来在我的页面上触发CSS3动画。在使用Google地图的页面上,我已将CSS设置为 display:none;
,直到点击航点。
This question has been asked many times here, and that is that Google Maps display partially. My problem is: I use waypoints to trigger CSS3 animations on my page. On the page with Google Maps I have set the CSS to display: none;
until the waypoint is hit. This causes Google Maps to break.
根据我的研究和Stack Overflow上的搜索,修复是这样的(如果我错了,请纠正我):
From my research and a search done on Stack Overflow, the fix is this (correct me if I am wrong):
google.maps.event.trigger(map, 'resize');
这是我从另一个开发者在线获得的JavaScript代码,我不知道从哪里Google地图调整触发器?:
Here is my JavaScript code that I have gotten from another developer online, I have no idea where to put the Google Maps resize trigger?:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var latlng = new google.maps.LatLng(-33.8333406,18.6470022);
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Get Directions"
});
}
function calcRoute() {
var start = document.getElementById("routeStart").value;
var end = "-33.8333406,18.6470022";
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
if (status == 'ZERO_RESULTS') {
alert('No route could be found between the origin and destination.');
} else if (status == 'UNKNOWN_ERROR') {
alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
} else if (status == 'REQUEST_DENIED') {
alert('This webpage is not allowed to use the directions service.');
} else if (status == 'OVER_QUERY_LIMIT') {
alert('The webpage has gone over the requests limit in too short a period of time.');
} else if (status == 'NOT_FOUND') {
alert('At least one of the origin, destination, or waypoints could not be geocoded.');
} else if (status == 'INVALID_REQUEST') {
alert('The DirectionsRequest provided was invalid.');
} else {
alert("There was an unknown error in your request. Requeststatus: \n\n"+status);
}
}
});
}
这里是触发显示的waypoints jquery代码:block
Here is waypoints jquery code that triggers display: block
// Studio Page
jQuery('.studio-page').waypoint(function() {
jQuery('.kickass-studio').addClass( 'show animated bounceInLeft' );
jQuery('.location').addClass( 'show animated bounceInRight' );
jQuery('.geo-address').addClass( 'show animated bounceInDown' );
},
{
offset: '10%'
});
推荐答案
只需在初始化函数末尾添加它。 ..
此外,你需要保存在一个变量的地图对象,并调用resize事件再次当你使google地图的CSS显示:block与此地图对象
Just add it at the end of initialize function.... Also you need to save the map object in a variable and call the resize event again when you make the css of the google maps to display: block with this map object
这篇关于Google地图调整大小css显示无的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!