谷歌地图API和JQuery幻灯片切换未正确初始化地图
我遇到的问题是谷歌地图api的初始化。当我在一个设置为显示的普通div中设置了mapsapi时,它可以完美地工作并上下切换,但当我将显示设置为none时,它无法正确加载。贴图仅向下加载一半,不显示pin图像。是否有解决方法,或者在最初未显示的切换幻灯片中,这是否根本不起作用 我创建的示例页面如下所示谷歌地图API和JQuery幻灯片切换未正确初始化地图,jquery,google-maps,Jquery,Google Maps,我遇到的问题是谷歌地图api的初始化。当我在一个设置为显示的普通div中设置了mapsapi时,它可以完美地工作并上下切换,但当我将显示设置为none时,它无法正确加载。贴图仅向下加载一半,不显示pin图像。是否有解决方法,或者在最初未显示的切换幻灯片中,这是否根本不起作用 我创建的示例页面如下所示 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scr
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='scripts/jscripts/jquery-1.4.js'></script>
<style type="text/css">
.slideTogglebox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:500px;
height:350px;
background-color:#000000;
color:white;
display:none;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<?php
$url ="http://maps.googleapis.com/maps/api/geocode/xml?address=PL329YN&sensor=false";
$getAddress = simplexml_load_file($url);
$lat = $getAddress->result->geometry->location->lat;
$lng = $getAddress->result->geometry->location->lng;
?>
<div class="clear">
<h3>slideToggle() example</h3> <a href="javascript:slideToggle()" id=slideToggle>Click Me</a>
<br/>
<div class="slideTogglebox" id='map_canvas'>
</div>
</div>
<script type="text/javascript">
function initialize() {
<?php
print "var lat = $lat;";
print "var lng = $lng;";
?>
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = 'images/map/pin_green.png';
var myLatLng = new google.maps.LatLng(lat, lng);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
var init = false;
$("#slideToggle").click(function () {
if (!init) {
initialize();
init = true;
}
$('.slideTogglebox').slideToggle('slow');
});
</script>
答案似乎很简单。仅当包含映射的div可见时才初始化映射。在.slideToggle调用中放入回调,检查div是否可见并且没有映射。如果是这样,加载映射您可能希望在加载映射时禁用单击事件操作。您可能还想考虑将MaskCabVIEW制作为SLITEDOGGLBOX的子代,而不是SLITEDOGGLBOX本身,以防万一地图如何反应等。
顺便说一句,当您已经通过jQuery添加了一个点击事件时,会发生什么呢?新的V3API和jQuery似乎出现了问题。它似乎可以毫无问题地与谷歌地图api的v2配合使用 因此,为了解决这个问题,我在div切换之后调用了initialize函数。然后,我在CSS中设置了背景,使其与页面上的背景相匹配,以便在切换后显示为fadein
<script type="text/javascript">
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle(function initialize() {
<?php
print "var lat = $lat;";
print "var lng = $lng;";
?>
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = 'images/map/pin_green.png';
var myLatLng = new google.maps.LatLng(lat, lng);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
});
});
</script>
您也可以只设置css不透明度、高度的动画,而无需在js中使用额外的回调。工作起来很有魅力。只要包含贴图的div在块中显示,就可以使用此方法